Kita akan belajar mulai dari cara yang umum digunakan hingga yang jarang atau bahakan tidak direkomendasikan untuk digunakan.
Sebelum memulai, silahkan buat terlebih dahulu folder atau direktori baru, kemudian buat file baru bernama index.html dan script.js. Akhiran .html dan .js merupakan sebuah ekstensi, htmlmerupakan ekstensi untuk file HTML sedangkan js merupakan ektensi JavaScript.
File index.html untuk membuat struktur atau tag dasar HTML, sedangkan script.js untuk membuat coding JavaScript. kedua masukkan kedalam satu folder beri nama misalnya kode javascript pada html, Kedua file tersebut(index.html dan script.js) dapat dibuat dengan Visual Studio Code, notepad, notepad++, sublim atau lainnya.
Stuktur direktori kita sekarang kurang lebih seperti ini:
Mari kita modifikasi terlebih dahulu file index.html kita, dengan menambahkan kode JavaScript yang menampilkan pesan “hello world” ke console browser:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar JavaScript - KodeAlgo</title> </head> <body> <script> console.log('Hello World'); </script> </body> </html> |
Mari kita buka file index.html di browser…
Jika tidak menggunakan Live Server, klik kanan file index.html kemudian pilih opsi Copy Relative Path, lalu tempelkan ke address bar browser, setelah itu tekan tombol Enter.
Untuk memastikan bahwa file tersebut berhasil dibuka, lihat console browser apakah menampilkan pesan “Hello World” atau tidak.
Mari kita bahas berbagai cara membuat kode JavaScript di dalam HTML:
- Dalam Tag
<script>HTML- Sebelum Tag
</head> - Sebelum Tag
</body>
- Sebelum Tag
- JavaScript Eksternal
- Sebelum Tag
</head> - Sebelum Tag
</body>
- Sebelum Tag
- Atribut Event HTML
- URL Tautan
A. Kode JavaScript Internal (di Dalam)
Tag <script> HTML
Untuk membuat kode JavaScript di dalam HTML kita bisa menulisnya langsung di dalam file HTML, namun kode JavaScript harus berada di dalam tag <script>.
|
1 2 3 |
<script> console.log('Hello World'); </script> |
Kode ini bisa kita tempatkan di dalam tag HTML <head> atau <body>.
Kita bisa menempatkannya di mana saja di dalam tag <head> atau <body>, tapi umumnya kode JavaScript ditempatkan tepat sebelum tag </head> atau </body>.
Menulis kode JavaScript di dalam file HTML dikenal sebagai Inline atau internal JavaScript.
Sebelum Tag </head>
Untuk menulis kode JavaScript di dalam tag <head> HTML, kodenya akan terlihat seperti ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar JavaScript</title> <script> console.log('Hello World'); </script> </head> <body> </body> </html> |
Mari kita buktikan, perhatikan kode di bawah ini:
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script> document.getElementById('paragraf').innerHTML = 'Belajar JavaScript'; </script> </head> <body> <h1 id="paragraf">Hello World</h1> </body> </html> |
Kode JavaScript yang ada di daKode JavaScript yang ada di dalam tag <head> di atas dimaksudkan untuk mengganti tulisan “Hello World” yang ada di dalam tag <h1> menjadi “Belajar JavaScript”.
Tapi kode ini malah error karena kode JavaScript dieksekusi terlebih dahulu sebelum tag <h1> dimuat.
Pesan kesalahannya “Uncaught TypeError: Cannot set property ‘innerHTML’ of null“, dapat dilihat di console browser
Kita sebetulnya bisa mengakalinya agar kode JavaScript yang ada di dalam tag <head> dieksekusi setelah DOM dimuat termasuk tag <body> menggunakan event DOMContentLoaded, ini akan kita pelajari pada materi tentang DOM.
Untuk saat ini kita hanya perlu tau bahwa penempatan kode JavaScript dapat mempengaruhi waktu eksekusinya, karena kode di dalam file HTML dieksekusi dari atas ke bawah.
Sebelum Tag </body>
Contoh kode JavaScript di dalam tag <body>:
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar JavaScript - KodeAlgo</title> </head> <body> <script> console.log('Hello World'); </script> </body> </html> |
Karena sekarang kode HTML kita berada tepat sebelum tag </body> kita bisa memanipulasi kode HTML yang ada di atasnya.
Mari kita gunakan kode sebelumnya:
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h1 id="paragraf">Hello World</h1> <script> document.getElementById('paragraf').innerHTML = 'Belajar JavaScript'; </script> </body> </html> |
Kode diatas berhasil mengubah tulisan “Hello World” yang ada di dalam tag <h1> menjadi “Belajar JavaScript” karena tag tersebut dimuat sebelum kode JavaScript.
B. Kode JavaScript Eksternal di HTML
Memanggil atau memuat kode JavaScript yang berada di luar file HTML disebut eksternal JavaScript.
Maksud dari eksternal adalah kode JavaScript tidak berada di dalam file HTML saat ini atau yang memanggil.
Untuk memanggil file JavaScript eksternal mirip seperti inline, kita bisa menggunakan tag <script>.
Hanya saja kita tidak perlu memasukkan kode JavaScript diantara tag <script> dan </script>.
Kita hanya perlu menambahkan atribut src (source) untuk mendeklarasikan lokasi file JavaScript yang ingin dipanggil.
Kita bisa memanggil file JavaScript yang ada di penyimpanan lokal, kode di bawah ini memanggil file bernama script.js yang berada di dalam direktori yang sama dengan file HTML yang memanggil.
|
1 |
<script src="script.js"></script> |
Jika berada di dalam direktori yang berbeda tapi direktori yang memuat file script.js sejajar dengan file index.html:
<script src=”/js/script.js”></script>
Jika masing-masing berada di direktori yang berbeda, tapi kedua direktori yang menampung script.js dan index.html sejajar:
|
1 |
<script src="../js/script.js"></script> |
Notasi titik dua kali .. digunakan untuk keluar dari direktori saat ini, naik ke atasnya.
Atau, memanggil JavaScript yang ada di internet, jQuery misalnya:
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
Metode ini dianggap sebagai praktik terbaik karena kode JavaScript tidak bercampur dengan kode HTML, sehingga kode kita lebih mudah dipelihara.
Apalagi jika kode JavaScript dipanggil tepat setelah tag </body>, karena kode JavaScript dieksekusi setelah konten HTML yang dilihat pengguna dimuat.
Urutan eksekusi kode di dalam file HTML tetap dari atas ke bawah, perilakunya sama dengan kita menulis kode JavaScript secara inline.
Sebelum Tag </head>
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="script.js"></script> </head> <body></body> </html> |
Sebelum Tag </body>
Contoh memanggil JavaScript eksternal tepat sebelum tag </body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <script src="script.js"></script> </body> </html> |
C. Kode JavaScript di Atribut Event HTML
Kita juga bisa menyisipkan kode JavaScript didalam attribut event HTML, ada banyak yang bisa kita gunakan, sebagai contoh mari kita gunakan onClick.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <button onclick="confirm('Belajar JavaScript')">Confirm</button> <button onclick="console.log('Belajar JavaScript')">Log</button> </body> </html> |
Kode html di atas akan membuat dua buah tombol, yakni tombol Confirm dan Log.
Ketika tombol Confirm diklik, browser akan mengeksekusi kode JavaScript yang kita sematkan di dalam atribut event onClick dalam hal ini kode untuk menampilkan popup konfirmasi yang berisi teks “Belajar JavaScript”.
Sedangkan tombol Log, akan menulis pesan “Belajar JavaScript” ke console browser.
Jika memungkinkan, jangan gunakan metode ini karena kita bisa membuat hal yang sama menggunakan DOM, tapi lebih rapi.
D. Kode JavaScript di URL Tautan
Metode ini hanya untuk pengetahuan saja, jangan pernah digunakan.
Metode ini mungkin tidak berjalan di beberapa browser karena sering digunakan untuk melakukan serangan XSS, beberapa browser dibekali dengan fitur untuk memproteksi serangan ini.
Untuk menulis kode JavaScript di URL, kita bisa membuat tag <a> dan memasukkannya ke dalam atribut href, kode yang kita buat harus diawali dengan kata kunci javascript:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <a href="javascript:alert('Hello World')">Link</a> </body> </html> |
Ketika kita mengklik tulisan “Link”, browser akan mengeksekusi kode JavaScript yang ada di dalam atribut href.
Selain menyisipkan di atribut href, kita juga bisa menulisnya langsung di address bar browser, coba ketik javascript:alert('Hello World').
Leave a Reply