Tutorial JavaScript Part 2 : Memasukkan Kode JS ke HTML

Assalamu'alaikum W.W

Oke pada kesempatan kali ini rekayasaternaklele akan membahas tentang TTutorial JavaScript Part 2 : Memasukkan Kode JS ke HTML.

Judul
Tutorial JavaScript Part 2 : Memasukkan Kode JS ke HTML

Pengertian

JavaScript adalah bahasa pemrogramman berbasis Website yang dikelola atau diproses berdasarkan komputer user atau clien side. Dengan JavaScript kita bisa membuat tampilan website lebih interaktif, seperti membuat event, animasi, game dan bentuk interaktif lainnya.

Latar Belakang

Untuk menjadi developer web kita perlu belajar JavaScript karena JavaScript merupakan bahasa interaktif sebuah website. Jika HTML diguakan untuk struktur website, CSS untuk desain website, Javascript digunakan untuk interaktif sebuah website. JavaScript juga termasuk  bahasa paling populer di Internet.

Maksud dan Tujuan
Bisa, memahami, mengerti dan dapat menggunakan JavaScript dalam pembutan website

Alat dan Bahan
Text Editor, Koneksi Internet, dan PC

Jangka Waktu
1 Jam

Pembahasan

Cara Memasukkan Kode JavaScript ke dalam HTML

Untuk menginputkan kode JS ke dalam HTM,  ada 4 cara yaitu:

• Internal JavaScript)
• External JavaScript
• Inline JavaScript
• Menggunakan URL

External JavaScript
File JavaScript terpisah, lalu ‘memanggilnya’ dari HTML. Cara ini sangat disarankan karena akan memberikan banyak keuntungan dan fleksibilitas dalam membuat program JavaScript.


Sebuah file JavaScript disimpan dalam ekstensi .js. Dari halaman HTML, kita memanggilnya menggunakan tag <script> dengan atribut src dan ditutup dengan </script>. Atribut src berisi alamat dari file javascript tersebut, seperti berikut ini:

Penamaan file JavaScript dengan akhiran .js hanyalah sebuah kesepakatan di kalangan programmer. Kita bisa mengubahnya seusia keinginan kita seperti anyar.ganteng, asal pada saat pemanggilan dalam tag <script> harus sesuai dengan nama file tersebut, seperti <script src="anyar.ganteng”></script>.


Internal JavaScript
Internal disini berarti bahwa kode JavaScript ditulis pada halaman yang sama dengan HTML, atau di dalam satu file HTML.
Cara ini merupakan cara yang paling sering digunakan, jika kode JavaScript tidak begitu panjang, dan hanya digunakan di 1 halaman saja. Kode JavaScript yang akan diinput diletakkan diantara tag pembuka <script> dan tag penutup</script> seperti berikut ini:

Inline JavaScript
Cara ketiga untuk menjalankan JavaScript adalah dengan memanggilnya menggunakan Event Handler dari dalam tag HTML.Maksudnya pemanggilan kode javascript ketika ‘sesuatu’ terjadi dalam tag HTML.
Contoh :

Cara penginputan kode JavaScript dengan menggunakan Event Handler seperti ini, walaupun praktis namun tidak disarankan, karena kita mencampurkan JavaScript dengan HTML. Dan jika kode JavaScript agak panjang, akan menyulitkan untuk memisahkan kode HTML dengan JavaScript.

Menggunakan URL
Maksudya adalah dengan menyisipkan JavaScript ke dalam alamat href dari tag HTML. Cara ini disebut juga dengan protocol javascript (jarang digunakan). Disebut demikian, karena kita mengganti alamat link dari yang biasa menggunakan protocol http//: menjadi javascript:
Contoh :

Cara Terbaik dalam Memasukkan Kode JS ke HTML
Dari 4 cara diatas, cara yang paling disarankan menggunakan Eksternal JavaScript. Berikut alasannya:

• Menyederhanakan halaman HTML dengan memindahkan seluruh kode JavaScript
• Sebuah file JavaScript external bisa digunakan untuk beberapa halaman HTML, sehingga jika diperlukan perubahan, kita hanya perlu mengedit sebuah file daripada mengubah secara satu persatu halaman HTML tempat JavaScript ditulis secara internal.
• Jika file JavaScript external digunakan oleh beberapa halaman, file tersebut hanya perlu di download oleh web browser pada saat pertama kali saja. Pada saat loading halaman lainnya, web browser cukup mengambilnya dari browser cache, sehingga mempercepat loading halaman.

Kesimpulan

Jadi cara memasukkan kode JS ke HTML paling efektif menggunakan Eksternal JavaScript, karena:

• Menyederhanakan halaman HTML dengan memindahkan seluruh kode JavaScript
• Sebuah file JavaScript external bisa digunakan untuk beberapa halaman HTML, sehingga jika diperlukan perubahan, kita hanya perlu mengedit sebuah file daripada mengubah secara satu persatu halaman HTML tempat JavaScript ditulis secara internal.
• Jika file JavaScript external digunakan oleh beberapa halaman, file tersebut hanya perlu di download oleh web browser pada saat pertama kali saja. Pada saat loading halaman lainnya, web browser cukup mengambilnya dari browser cache, sehingga mempercepat loading halaman.

Referensi

https://id.wikipedia.org/wiki/JavaScript
https://www.w3schools.com

Share this post