Di mana elemen html ditempatkan javascript?

Salah satu alasan memilih menulis kode JavaScript biasanya dianggap terkait dengan semakin banyaknya kode yang ditulis dalam satu file (code management). Ada 2 cara yang biasa digunakan

Pertama, tulis langsung di tag

<script src="file.js"></script>
_1 atau disebut metode inline

<script>    // kode JavaScript</script>
_

Yang kedua adalah metode eksternal, yaitu menulis kode JavaScript di file terpisah. Sama seperti sebelumnya, menggunakan tag

<script src="file.js"></script>
_1 tetapi dalam hal ini perlu menambahkan atribut
<script src="file.js"></script>
5 yang mereferensikan nama file JavaScript yang ingin Anda muat, sehingga akan terlihat seperti ini

<script src="file.js"></script>
Penempatan

Contoh lain

<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>

Browser tidak akan merender apa pun di halaman hingga menemukan pembuka tag

<script src="file.js"></script>
2

Menempatkan

<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3 di dalam tag
<script src="file.js"></script>
7 biasanya menunjukkan proses yang cukup lambat, seringkali halaman hanya putih selama beberapa detik, bahkan sebelum pengguna dapat mulai membaca atau berinteraksi dengan halaman tersebut

</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
_5 selesai mengunduh dan saat

<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
6 mulai mengunduh. Ruang kosong adalah waktu yang diperlukan agar kode di
<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
5 dieksekusi sepenuhnya

Setiap file harus menunggu hingga file sebelumnya telah diunduh dan dijalankan, sebelum pengunduhan berikutnya dapat dimulai. Sementara itu, pengguna akan melihat layar putih kosong karena file sedang diunduh satu per satu

Masalah Penempatan

Sebelumnya kita sudah mengetahui bahwa

<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
_3 dapat ditempatkan pada
<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
9 atau
<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>
<script>
document.write("The date is " + (new Date()).toDateString());
</script>

</p>
</body>
</html>
0

<html>
<head>
<script>
// document.head is available
// document.body is not!
</script>

</head>
<body>
<script>
// document.head is available
// document.body is available
</script>

</body>
</html>

Pada kode di atas kita melihat ada masalah dengan penempatan. Ketika kode JavaScript ditempatkan di

<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
_9, kode tersebut tidak dapat mengakses
<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>
<script>
document.write("The date is " + (new Date()).toDateString());
</script>

</p>
</body>
</html>
0, ini adalah masalah serius jika kode tersebut memiliki fungsi untuk mengelola elemen di
<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>
<script>
document.write("The date is " + (new Date()).toDateString());
</script>

</p>
</body>
</html>
0

Seperti yang telah dibahas sebelumnya, hal ini terjadi karena browser akan membaca elemen HTML satu per satu dari atas ke bawah, sehingga ketika

<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3 di
<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
9 dimuat, browser belum merender elemen HTML apa pun di tag
<script src="file.js"></script>
2

Solusi umum yang digunakan adalah meletakkan

<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
_3 di akhir
<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>
<script>
document.write("The date is " + (new Date()).toDateString());
</script>

</p>
</body>
</html>
0

<html>
<head>
</head>
<body>
// ...
// ...
<script>
// kode ..
</script>
<script src="file.js"></script>

</body>
</html>

Ini dilakukan agar browser memuat elemen HTML di

<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>
<script>
document.write("The date is " + (new Date()).toDateString());
</script>

</p>
</body>
</html>
0 terlebih dahulu dan memuat
<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3 di akhir. Sampai di sini kita dapat melihat bahwa solusi ini cukup untuk menyelesaikan masalah sebelumnya

Dengan solusi ini, browser akan memperhatikan

<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3 dan mulai mengunduhnya hanya setelah mengunduh dokumen HTML sepenuhnya

Namun, ini bisa menjadi sedikit masalah untuk dokumen HTML yang sangat panjang, bisa menyebabkan penundaan yang cukup lama

Hal ini sebenarnya tidak akan terlihat jika koneksi internet sangat cepat, namun banyak orang yang masih memiliki kecepatan internet yang lambat dan menggunakan koneksi internet seluler yang jauh dari kata sempurna.

Menunda

Sejak HTML 4, ditambahkan atribut baru untuk ________0______1, yaitu

<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
3. Atribut
<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
_3 digunakan untuk memberi tahu browser agar tidak menunggu
<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3

Browser akan terus memproses HTML, membangun DOM.

<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3 dimuat di 'background', kemudian dijalankan ketika DOM selesai dibuat

<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3 dengan atribut
<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
3 dapat ditempatkan di mana saja di HTML, tetapi
<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
3 tidak berfungsi dengan baik jika kode Javascript ditulis sebaris atau secara internal

// defer berfungsi ketika menggunakan eksternal file
<script defer src="file.js"> </script>
// defer tidak berfungsi ketika dituliskan inline
<script defer>
// Kode..
</script>

<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3 dengan
<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
3 selalu dijalankan saat DOM terisi penuh, tetapi sebelum acara
<html>
<head>
<script>
// document.head is available
// document.body is not!
</script>

</head>
<body>
<script>
// document.head is available
// document.body is available
</script>

</body>
</html>
2

<p> .. </p><script>
document.addEventListener('DOMContentLoaded', () =>
alert("DOM siap setelah defer")
);
</script>
<script defer src"file.js"></script>

<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3 dengan atribut
<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
3 akan dijalankan sesuai urutan, sama seperti normal
<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3

<script defer src"file1.js"></script>
<script defer src"file2.js"></script>
<script defer src"file3.js"></script>

Browser akan memindai halaman untuk menemukan

<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3 dan mengunduhnya secara paralel. Jadi pada contoh di atas,
<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
_3 ketiga diunduh secara paralel, ini memungkinkan
<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
6 atau
<html>
<head>
<script>
// document.head is available
// document.body is not!
</script>

</head>
<body>
<script>
// document.head is available
// document.body is available
</script>

</body>
</html>
9 selesai terlebih dahulu sebelum
<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
5

Namun, selain memberi tahu browser untuk tidak memblokir, atribut

<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
3 juga memastikan bahwa urutan relatif dipertahankan

Jadi, meskipun

<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
6 atau
<html>
<head>
<script>
// document.head is available
// document.body is not!
</script>

</head>
<body>
<script>
// document.head is available
// document.body is available
</script>

</body>
</html>
9 dimuat terlebih dahulu, browser akan menunggu dan menjalankannya sesuai urutan pada contoh kode di atas

Asinkron

Atribut

<html>
<head>
</head>
<body>
// ...
// ...
<script>
// kode ..
</script>
<script src="file.js"></script>

</body>
</html>
4 hampir sama dengan
<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
3.
<html>
<head>
</head>
<body>
// ...
// ...
<script>
// kode ..
</script>
<script src="file.js"></script>

</body>
</html>
_4 juga memiliki fungsi agar
<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3 tidak memblokir proses lain, perbedaan mendasar adalah perilaku kedua atribut

<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
3 akan diunduh secara paralel, tetapi pada akhirnya akan dimuat sesuai dengan urutan kode, dari atas ke bawah. Sedangkan
<html>
<head>
</head>
<body>
// ...
// ...
<script>
// kode ..
</script>
<script src="file.js"></script>

</body>
</html>
4 tidak, async akan mengunduh dan memuat secara paralel, jadi
<html>
<head>
</head>
<body>
// ...
// ...
<script>
// kode ..
</script>
<script src="file.js"></script>

</body>
</html>
4 cocok untuk digunakan ketika satu
<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3 dengan yang lain tidak memiliki ketergantungan (independen)

Selain itu,

<html>
<head>
<script>
// document.head is available
// document.body is not!
</script>

</head>
<body>
<script>
// document.head is available
// document.body is available
</script>

</body>
</html>
2 dan
<html>
<head>
</head>
<body>
// ...
// ...
<script>
// kode ..
</script>
<script src="file.js"></script>

</body>
</html>
4 tidak saling menunggu, artinya belum pasti mana yang akan dimuat terlebih dahulu

Kompatibilitas Peramban

Penting untuk mengetahui apakah

<html>
<head>
</head>
<body>
// ...
// ...
<script>
// kode ..
</script>
<script src="file.js"></script>

</body>
</html>
_4 dan
<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
3 didukung sepenuhnya oleh browser


</body>
</html>_4 dan

<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
3 hampir sepenuhnya didukung oleh sebagian besar browser saat ini, kecuali Opera Mini

Kembali ke pertanyaan

  • Apa cara terbaik untuk menulis/mereferensikan kode JavaScript dalam HTML?

— Gunakan

<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
_3 di akhir
<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>
<script>
document.write("The date is " + (new Date()).toDateString());
</script>

</p>
</body>
</html>
0 jika pengguna yang ditargetkan memiliki koneksi internet yang baik

— Menggunakan

<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
_3 jika satu file dan file lain memiliki dependensi sehingga dimuat secara berurutan adalah suatu keharusan

— Gunakan

<html>
<head>
</head>
<body>
// ...
// ...
<script>
// kode ..
</script>
<script src="file.js"></script>

</body>
</html>
4 jika satu file dan file lainnya tidak memiliki dependensi (independen)

—Menggunakan event

<html>
<head>
<script>
// document.head is available
// document.body is not!
</script>

</head>
<body>
<script>
// document.head is available
// document.body is available
</script>

</body>
</html>
2 jika kode JavaScript ditulis sebaris dan berada di dalam
<script src="file.js"></script>
7, untuk dimuat setelah DOM tersedia

  • Mengapa
    <script src="file.js"></script>
    1 umumnya ditempatkan di akhir
    <script src="file.js"></script>
    2 ?

Asumsi saya ini dilakukan karena sebelumnya

<html>
<head>
</head>
<body>
// ...
// ...
<script>
// kode ..
</script>
<script src="file.js"></script>

</body>
</html>
4 dan
<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
3 tidak bekerja dengan baik di semua browser, sehingga
<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3 dimuat setelah DOM dimuat terlebih dahulu

Mengetahui hal di atas, jika kita menggunakan

<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
_3,
<html>
<head>
</head>
<body>
// ...
// ...
<script>
// kode ..
</script>
<script src="file.js"></script>

</body>
</html>
4 atau event
<html>
<head>
<script>
// document.head is available
// document.body is not!
</script>

</head>
<body>
<script>
// document.head is available
// document.body is available
</script>

</body>
</html>
2, bukankah mungkin kita memasukkan
<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3 ke dalam
<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
9, bukan?

<script src="file.js"></script>
0

Catatan

Dengan menggunakan

<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
_3 atau
<html>
<head>
</head>
<body>
// ...
// ...
<script>
// kode ..
</script>
<script src="file.js"></script>

</body>
</html>
4, pengguna mungkin akan melihat halaman sebelum
<html>
<head>
// JavaScript di dalam <head>
<script src="file.js"></script>
</head>
<body>
<div id="dom"></div>
// JavaScript di akhir <body>
<script src="file.js"><script>
</body>
</html>
3 dimuat

Dalam beberapa kasus, itu tidak akan menampilkan beberapa komponen grafis sebelum JavaScript diinisialisasi

Dengan begitu, menampilkan animasi atau apapun yang menunjukkan bahwa halaman sedang loading, penting untuk ditambahkan agar pengguna dapat melihat dengan jelas apa yang sedang dilakukan halaman tersebut, dan apa yang masih dipersiapkan.

<html>
<head>
</head>
<body>
// ...
// ...
<script>
// kode ..
</script>
<script src="file.js"></script>

</body>
</html>
_4 dan
<html> 
<head>
<title>Document</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
3 memiliki sifat masing-masing, jika diilustrasikan dengan grafik, maka akan terlihat seperti ini

Tentu saja, ada cara lain untuk menambahkan kode JavaScript di HTML, yang mungkin akan dibahas di artikel lain

Di mana elemen HTML ditempatkan JavaScript?

Anda dapat langsung menambahkan JavaScript di HTML dengan menggunakan tag yang menyertakan semua kode JS yang Anda tulis. Kode JS yang dapat ditambahkan. antara tag

Di mana kode JavaScript ditempatkan?

Kode Javascript disimpan dalam file dengan ekstensi '. js' . Kemudian file eksternal ini dapat dipanggil dari dokumen HTML dengan menggunakan atribut 'src' dari tag

Cara mana untuk memanggil fungsi JavaScript dari elemen HTML?

Cara Memanggil /Eksekusi Fungsi . nama fungsi(); . // buat fungsi memanggil fungsi di dalam kode Javascript dengan menuliskan nama fungsinya seperti ini: namaFungsi(); Contoh: // membuat fungsi fungsi sayHello(){ konsol. log("Halo Dunia. "); } // panggil function sayHello() // kemudian akan menghasilkan -> Hello World.

Bagaimana cara menulis kode program JavaScript pada dokumen HTML?

Tag yang digunakan untuk memanggil JavaScript biasanya ditambahkan di antara tag di antara tag Kode pada di atas adalah contoh kode HTML yang tidak mengandung satu baris a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> kode JavaScript . Untuk melihat contoh cara kerja JavaScript , tambahkan baris perintah berikut ke dalam kode di ke atas.