Cara menggunakan SILBLINGS di JavaScript

Menempatkan skrip di bagian bawah elemen

document.write("Kode Javascript dari File Eksternal");
5 meningkatkan kecepatan tampilan, karena interpretasi skrip memperlambat tampilan.

Tulisan di akhir

document.write("Kode Javascript dari File Eksternal");
_5 akan meningkatkan kecepatan tampilan atau tampilan konten di web

Karena, jika kita menulis di

document.write("Kode Javascript dari File Eksternal");
_4, skrip akan dieksekusi terlebih dahulu sebelum konten ditampilkan

Jadi, disarankan untuk menulis kode Javascript di

document.write("Kode Javascript dari File Eksternal");
5, tepatnya sebelum menutup
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>
2

2. Menulis Javascript ke File Eksternal

Cara kedua, kita bisa menulis Javascript di file terpisah dengan HTML

Biasanya digunakan jika kita tidak ingin kode Javascript tercampur dengan kode HTML

Bagaimana cara melakukannya?

Caranya adalah dengan membuat file dengan ekstensi

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>
3. File ini kita isi dengan kode Javascript

Misalnya, saya akan membuat file eksternal dengan nama

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>
4 dan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>
5 sebagai kode HTML-nya

Cara menggunakan SILBLINGS di JavaScript

Berikut isi file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>
4

document.write("Kode Javascript dari File Eksternal");

Maka isi dari

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>
_5 adalah sebagai berikut

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>
_

Hasil

Cara menggunakan SILBLINGS di JavaScript

Cobalah untuk memperhatikan

Pada kode HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>
_5, kita masih menggunakan tag
document.write("Kode Javascript dari File Eksternal");
1. Namun, tag ini tidak kami isi dengan kode Javascript. Kecuali jika kita menggunakan atribut
<script src="kode-script.js">
_0 untuk menggunakan kode Javascript dalam file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>
4

Oh ya, perlu diperhatikan juga

Tag

document.write("Kode Javascript dari File Eksternal");
1 harus tetap ditutup dengan
<script src="kode-script.js">
3 walaupun tidak ada isinya

Salah. ❌

<script src="kode-script.js">

BENAR. ✅

<script src="kode-script.js"></script>

Lalu bagaimana jika kode Javascript berada di folder yang berbeda dengan dokumen HTML?

Atau apakah Javascript ada di internet?

Bagaimana itu?

Untuk kode Javascript yang berada di folder yang berbeda, kita tuliskan mengikuti alamat path folder tersebut

Misalnya struktur foldernya seperti ini

Cara menggunakan SILBLINGS di JavaScript

Karena file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>
_4 ada di dalam folder
<script src="kode-script.js">
5, maka kita harus menuliskannya

<script src="js/kode-script.js"></script>

Giaman mengerti kan?

Nah, untuk kode Javascript yang diambil dari internet, kita cukup menuliskan alamat URL dari Javascript tersebut

Contoh

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

3. Menulis Javascript pada Atribut

Penulisan Javascript pada atribut biasanya dilakukan pada atribut event

Contoh

<button onclick="alert('Ok Terima kasih!')">Klik donk!</button>

Dalam contoh ini, kami membuat elemen

<script src="kode-script.js">
_6 dan memiliki atribut
<script src="kode-script.js">
7 yang berisi kode Javascript

Nantinya, kode javascript pada atribut

<script src="kode-script.js">
_7 akan dieksekusi ketika event klik terjadi pada elemen
<script src="kode-script.js">
6

Bisakah Javascript hanya ditulis pada atribut

<script src="kode-script.js">
7?

<script src="kode-script.js">
_7 atribut adalah salah satu atribut event di HTML, kode Javascript dapat ditulis di semua atribut event

Ingat atribut acara

Bukan atribut normal

Jika Anda ingin melihat semua atribut acara, silakan periksa di Referensi Acara

Cara menggunakan SILBLINGS di JavaScript

Penulisan atribut event pada HTML dimulai dengan

<script src="kode-script.js"></script>
2, misalnya untuk event
<script src="kode-script.js"></script>
3, maka pada atribut HTML ditulis
<script src="kode-script.js">
7

Contoh lain untuk pemahaman yang lebih baik

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Penulisan Javascript di Atriibut</title>
</head>

<body>
    <textarea onkeyup="document.getElementById('counter').innerText = this.value.length" cols="30" rows="10"></textarea>
    <p>Panjang: <span id="counter">0</span> karakter</p>
</body>

</html>

Pada contoh ini kita menggunakan event

<script src="kode-script.js"></script>
5, sehingga dituliskan
<script src="kode-script.js"></script>
6. Kejadian ini terjadi saat kita melepaskan tombol pada keyboard

Jadi nanti ketika kita mengetikkan elemen

<script src="kode-script.js"></script>
_7, kode Javascript di
<script src="kode-script.js"></script>
6 akan dieksekusi

Kode Javascript berfungsi untuk menampilkan jumlah karakter yang diketik

Hasil

4. Skrip Javascript pada URL

Nah cara ini yang menurut saya cukup aneh

Cara ini jarang digunakan dan hampir tidak ada yang menggunakannya dalam aplikasi

Tapi masih mungkin

Caranya adalah dengan menggunakan

<script src="kode-script.js"></script>
_9 di URL diikuti dengan kode Javascript yang ingin dieksekusi

Contoh

javascript:alert("Nah! ini Javascript")

Ini diketik di bilah alamat browser

Jadi hasilnya

Cara menggunakan SILBLINGS di JavaScript

Catatan. Cara ini tidak bekerja di web browser versi terbaru, karena ini adalah celah yang bisa digunakan untuk serangan XSS

Jadi, bagaimana kita menggunakan metode ini dalam HTML?

Cara ini bisa kita gunakan pada tag

<script src="js/kode-script.js"></script>
_0, lalu isikan dengan atribut
<script src="js/kode-script.js"></script>
1

Contoh

document.write("Kode Javascript dari File Eksternal");
0

Hasil

Cara menggunakan SILBLINGS di JavaScript

Jadi ketika link

<script src="js/kode-script.js"></script>
_0 di klik maka akan membuka URL
<script src="kode-script.js"></script>
9 dan menjalankan kode Javascript yang ada disana