Pada beberapa tutorial sebelumnya telah kita bahas Cara Menjalankan Kode Program JavaScript,. Sekarang akan dilanjutkan dengan metode atau Cara Memasukkan Kode JavaScript ke dalam file HTML

---

Cara memasukkan kode JavaScript ke dalam file HTML

JavaScript termasuk jenis bahasa skrip yang dimasukkan ke dalam file HTML. Untuk memasukkan atau menyisipkan kode JavaScript ke dalam HTML, ada 4 cara

• JavaScript internal
• JavaScript eksternal
• JavaScript sebaris
• Protokol JavaScript

Kami akan membahas keempat metode ini secara lebih rinci

---

Pemahaman Internal JavaScript

Cara pertama untuk menginput kode JavaScript ke dalam file HTML adalah dengan Internal JavaScript. Disebut sebagai ‘internal’ karena kode JavaScript itu ditulis pada halaman yang sama dengan kode HTML, atau di dalam satu file HTML. Kode JavaScript di input menggunakan tag seperti berikut:

Tag

Belajar JavaScript

Saya sedang belajar JavaScript di duniailkom.com

Belajar Web Programming di Duniailkom.

_

Saya menempatkan tag

Belajar JavaScript

Saya sedang belajar JavaScript di duniailkom.com

Belajar Web Programming di Duniailkom.

0. Ini adalah kode untuk menjalankan fungsi alert() milik JavaScript.

alert() adalah perintah khusus untuk menampilkan kotak informasi. Fungsi ini sering digunakan dalam proses pembuatan kode JavaScript hanya untuk menampilkan keluaran sederhana. Teks informasi ditulis di antara tanda kurung dan dalam tanda kutip

Simpan file di atas dengan nama apa saja asalkan berekstensi. html, misalnya index. html, lalu akses di browser web

Akibatnya, jendela peringatan akan muncul yang berisi teks "Hello World". Berikut adalah contoh dari internal JavaScript

Dalam beberapa tutorial JavaScript lama, Anda juga dapat menemukan atribut tambahan

   

  
  


  
Belajar JavaScript
  
Saya sedang belajar JavaScript di duniailkom.com
  
Belajar Web Programming di Duniailkom.

1 seperti contoh berikut

_

Dahulu, atribut

   

  
  


  
Belajar JavaScript
  
Saya sedang belajar JavaScript di duniailkom.com
  
Belajar Web Programming di Duniailkom.

_1 digunakan untuk membedakan JavaScript dari bahasa skrip lain seperti VBScript atau JScript. Namun karena VBScript dan JScript sudah punah, hampir semua web browser modern menjadikan JavaScript sebagai bahasa default. Oleh karena itu menulis

   

  
  


  
Belajar JavaScript
  
Saya sedang belajar JavaScript di duniailkom.com
  
Belajar Web Programming di Duniailkom.

_1 tidak lagi diperlukan

Selain itu, terkadang ada juga orang yang menuliskan atribut bahasa sebagai pengganti atribut tipe, seperti pada contoh berikut

Atribut bahasa dianggap usang (deprecated) dan disarankan untuk tidak digunakan lagi

---

Arti JavaScript Eksternal

Cara menginput kode JavaScript ke dalam file HTML yang kedua adalah dengan memindahkan kode JavaScript ke dalam file terpisah, kemudian diakses dari file HTML tersebut. Karena file JavaScript ini berada di luar file HTML, maka disebut juga JavaScript eksternal. Metode ini lebih direkomendasikan untuk kode JavaScript yang panjang, dan digunakan oleh banyak halaman

File JavaScript external disimpan dalam ekstensi .js, seperti: kode.js, register.js, atau kodeku.js. Dari halaman HTML, kita memanggilnya menggunakan juga dengan tag _

Perhatikan bahwa tag . Di antara tag ini, tidak bisa ditulis kode internal JavaScript lain, tapi harus dipisah ke dalam tag tersendiri:

_

Sebagai contoh praktis, saya akan memindahkan perintah peringatan ("Hello World. ”) ke dalam file terpisah. Silahkan buat file baru dengan nama kode_javascript. js, lalu isi perintah berikut

alert("Hello World!!")

Ya, hanya 1 baris itu saja, dan pastikan untuk menyimpannya di folder yang sama dengan kode HTML. Dalam HTML, kita akan memanggil file JavaScript dengan kode berikut

   
  


  
Belajar JavaScript
  
Saya sedang belajar JavaScript di duniailkom.com
  
Belajar Web Programming di Duniailkom.

Pada kode ini, perintah untuk memanggil file kode_javascript. js ada di baris 5. Alhasil, saat dijalankan, jendela peringatan akan langsung muncul seperti contoh di JavaScript internal

Alamat file JavaScript eksternal dapat berupa alamat relatif seperti contoh di atas, atau dapat berupa alamat absolut seperti

   

  
  


  
Belajar JavaScript
  
Saya sedang belajar JavaScript di duniailkom.com
  
Belajar Web Programming di Duniailkom.

4. Urutan penulisan alamat ini sama dengan atribut src pada HTML. Lebih lanjut tentang perbedaan antara alamat relatif dan absolut dapat ditemukan di Tutorial HTML tentang cara membuat tautan HTML

Penamaan file JavaScript dengan akhiran .js sebenarnya juga sebuah kesepakatan. Meskipun tidak umum, web browser tetap mengizinkan kita membuat akhiran atau extension lain seperti: kode_javascript.aku, atau kode_javascript.duniailkom, selama pemanggilan tag

Belajar JavaScript

Saya sedang belajar JavaScript di duniailkom.com

Belajar Web Programming di Duniailkom.

5. Namun agar lebih nyaman dan tidak membuat bingung, sebaiknya tetap mengikuti kesepakatan dengan menggunakan akhiran .js.

---

Arti JavaScript Sebaris

Cara ketiga untuk menjalankan JavaScript adalah dengan metode inline JavaScript. Hal ini dapat dilakukan dengan menggunakan konsep event handler

Konsep event handler termasuk bagian dari DOM (Document Object Model) baru telah kita pelajari secara khusus di tutorial terpisah. Tapi sederhananya, event handler adalah memanggil kode javascript ketika 'sesuatu' terjadi di tag HTML

Ini berarti ketika elemen HTML diklik, diklik kanan, diarahkan ke mouse, dll. Event handler dalam JavaScript ditulis dengan penambahan kata on, sehingga jika tombol diklik, menggunakan onclick, atau jika mouse berada di atas elemen disebut onmouseover, dll.

Berikut adalah praktik JavaScript sebaris yang berjalan saat tombol diklik

   


  
Belajar JavaScript
  
Saya sedang belajar JavaScript di duniailkom.com
  
Belajar Web Programming di Duniailkom.
  Klik Saya

Perhatikan baris 10 dari contoh kode di atas. Ke dalam tag , saya menambahkan

   

  
  


  
Belajar JavaScript
  
Saya sedang belajar JavaScript di duniailkom.com
  
Belajar Web Programming di Duniailkom.

6, ini merupakan kode JavaScript yang diinput melalui metode event handler.

Meski praktis, cara memasukkan kode JavaScript ini tidak disarankan. Alasannya karena kita mencampurkan kode JavaScript dengan HTML. Dan jika kode JavaScriptnya cukup panjang, tidak praktis lagi untuk menuliskannya hanya dalam 1 baris

Dalam pemrograman JavaScript, ada istilah yang disebut JavaScript yang tidak mengganggu. Unobtrusive JavaScript adalah filosofi atau paradigma yang percaya bahwa konten (HTML) sebisa mungkin harus dipisahkan dari perilaku (JavaScript) agar mudah dipelihara dan lebih fleksibel. Konsep ini dapat dibaca di http. // en. wikipedia. org/wiki/Unobtrusive_JavaScript

---

Memahami Protokol JavaScript

Cara terakhir yang juga sangat jarang digunakan adalah dengan memasukkan kode JavaScript ke alamat href tag HTML. Metode ini juga disebut Protokol JavaScript. Disebut demikian, karena kita mengubah alamat link dari yang biasa menggunakan protokol http// menjadi javascript

Berikut adalah contoh penggunaannya

   


  
Belajar JavaScript
  
Saya sedang belajar JavaScript di duniailkom.com
  
Belajar Web Programming di Duniailkom.
  Hallo Dunia...

Jika anda menjalankan kode diatas dan men-klik link Hallo Dunia… akan tampil alert Hello World!!. Jendela ini berasal dari kode JavaScript di tag pada baris 10:

Cara menjalankan JavaScript ini sudah ada sejak awal JavaScript dan sebagian besar telah ditinggalkan

---

Jadi Metode Apa Yang Harus Anda Gunakan?

Selain protokol JavaScript, tiga metode input JavaScript lainnya tidak menjadi masalah jika Anda ingin menggunakannya, yaitu internal, eksternal, dan inline. Pilihannya lebih kepada situasi yang dihadapi

• Jika kita membuat kode yang sangat singkat dan tidak keberatan sedikit kesulitan menemukan posisinya nanti, silakan gunakan Inline JavaScript
• Jika kami membuat kode yang cukup pendek dan tidak digunakan oleh halaman lain, harap gunakan JavaScript Internal
• Dan jika kita membuat kode yang cukup panjang atau kode tersebut akan digunakan oleh banyak halaman, maka JavaScript eksternal adalah pilihan terbaik

Catatan. Di masa lalu, JavaScript sebaris banyak dikritik karena menggabungkan kode JS dan HTML. Namun, konsep ini bahkan banyak digunakan oleh library/framework seperti React atau Vue

Berkaitan dengan cara menginput kode JavaScript ke dalam halaman HTML, sebenarnya masih ada masalah yang harus dibahas, apalagi jika kita menggunakan JavaScript internal dan eksternal. Masalahnya adalah, di mana tag

   

  
  


  
Belajar JavaScript
  
Saya sedang belajar JavaScript di duniailkom.com
  
Belajar Web Programming di Duniailkom.

_7 harus ditempatkan?

---

Saat ini di Duniailkom tersedia eBook / Uncover buku JavaScript. Dengan total lebih dari 650 halaman A4, materi dalam buku ini jauh lebih banyak dari tutorial yang ada di website Duniailkom. Penjelasan lebih lanjut bisa ke. Pengungkapan JavaScript – Panduan Pembelajaran JavaScript

Tag apa yang berisi JavaScript?

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

Di elemen HTML Apakah kita menempatkan JavaScript *?

Pada prinsipnya, kita bebas untuk menempatkan kode < /a> JavaScript di bagian mana saja, asalkan di dalam tag < skrip>.

Tag apa yang ada di HTML?

Berikut daftar tag yang harus ada di HTML. .

<. DOCTYPE html> — untuk deklarasi tipe dokumen;

— tag utama dalam HTML;

— untuk bagian kepala dokumen;