Tutorial Javascript | Menambahkan Kode Javascript di HTML

Terhadap postingan kali ini saya akan melanjutkan Seri Tutorial Javascript, yaitu berkaitan bagaimana cara memberikan kode Javascript di Html.

Di seri sebelumnya saya udah memperkenalkan apa tersebut javascript, nah disana juga udah disinggung sedikit berkenaan cara mengimbuhkan kode Javascript di Html.

Terdapat 4 cara yang bisa digunakan untuk memberikan kode Javascript di Html. Berasal dari keempat cara itu akan saya jelaskan satu-persatu disini.
Oleh gara-gara tersebut simak postingan ini baik-baik ya! Yuk segera saja kami mulai....

1. Menulis Kode Javascript Secara Internal

Ini merupakan cara yang paling tak terhitung digunakan. Penulisan kode Javascript secara internal adalah bersama mengenakan elemen/tag <script>.
Elemen <script> Ini mampu kalian tulis di bagian didalam elemen <head> maupun <body>.

Contoh penggunaan :

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Javascript</title> <script> console.log("Hello World!"); </script> </head> <body> <script> document.write("Selamat Datang di Wempy Tech Blog") </script> </body>

</html>

Jika kalian membukanya di browser lalu membuka Console, maka hasilnya seperti ini :

Terhadap contoh diatas sudah dicontohkan untuk menulis kode Javascript di didalam elemen <head> dan <body>.
Sesudah itu, manakah yang lebih baik? ditulis di di dalam elemen <head> atau <body>?

Kalian memang bisa jalankan kedua cara itu, tetapi tersedia yang berpendapat bahwa "Menulis Javascript di bagian akhir elemen <body> akan menambah kecepatan web site didalam menampilkan kontennya."

Gara-gara, jikalau kode Javascript ditulis di bagian elemen <head>, kode itu akan dilaksanakan terlebih dahulu sebelum konten situs ditampilkan.

Agar hal itu akan menyebabkan halaman situs jadi lebih lambat.

Menjadi, menulis kode Javascript di bagian akhir elemen <body> adalah cara yang paling disarankan.

2. Menulis Kode Javascript Secara Eksternal

Cara yang kedua adalah bersama dengan menuliskan kode Javascript secara terpisah bersama dengan arsip Html.
Kalian sanggup mengenakan cara ini jikalau kalian bukan dambakan mencampur kode Javascript bersama dengan HTML di di dalam satu arsip.

Yang mesti kalian melaksanakan pertama kali adalah bersama dengan membawa dampak arsip berekstensi .js. Nah, terhadap arsip ini kami isi bersama dengan kode Javascript.
Sebagai contoh, saya akan membawa dampak arsip bernama script.js yang memuat kode Javascript dan index.html memuat kode Html.

Lalu, kita isi file script.js dengan kode berikut:

document.write("Ini adalah teks yang berasal dari file eksternal Javascript"); console.log("Wempy Tech Blog");

dan isi juga file index.html dengan kode berikut

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Javascript</title> </head> <body> <script src="./script.js"></script> </body> </html>

Berikut Hasilnya :

Coba kalian memperhatikan contoh di atas, terhadap arsip HTML kami konsisten kenakan elemen <script>. Akan namun elemen ini bukan kami isi bersama dengan kode Javascript. Melainkan kami kenakan atribut src untuk memanggil kode Javascript yang tersedia di arsip script.js.

Terhadap contoh di atas kami meletakkan arsip HTML dan arsip Javascript di didalam folder yang serupa. Lalu, bagaimana kecuali kami meletakkan arsip HTML di folder yang berbeda ataupun di didalam subfolder?

Untuk arsip Javascript yang berada di folder yang berbeda, kami menuliskannya menurut alamat path foldernya. Semisal arsip script.js terletak di di dalam folder bernama /js. Maka pemanggilan arsip Javsacript nya jadi layaknya ini :

Selanjutnya jika kita ingin menggunakan kode Javascript dari Internet, kita tinggal menuliskan alamat URL dari file Javascript tersebut. Misalnya :

3. Menulis Kode Javascript Secara Inline

Yang akhirnya adalah menulis kode Javascript secara Inline. Caranya adalah bersama dengan menulis kode Javascript di didalam atribut event.
Berikut adalah contoh penggunaannya :

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Javascript</title> </head> <body> <p>Silahkan klik tombol di bawah ini :</p> <button onclick="alert('Halo Dunia! Selamat datang di Wempy Tech Blog')">Klik di sini</button> </body> </html>

Hasilnya :

Jika kita menekan tombolnya maka kode Javascript di dalam atribut onclick akan dieksekusi dan akan keluar pop up alert seperti di bawah ini :

Apakah Javascript hanya bisa ditulis di atribut onclick saja?

Jawabannya adalah tidak, karena atribut onclick adalah salah satu atribut event yang ada di HTML. Kode Javascript dapat ditulis di semua atribut event.

Berikut adalah daftar atribut event :

Jikalau kalian dambakan memirsa seluruh atribut event silahkan kunjungi html Event Attributes.
Penulisan atribut event di HTML biasanya diawali bersama on, semisal untuk event click maka julukan atributnya adalah onclick, lalu untuk event key press maka sebutan atributnya adalah onkeypress, dll.

4. Menulis Kode Javascript pada URL

Menurut saya ini merupakan cara yang aneh di dalam penulisan kode Javascript. Sebab cara ini sporadis apalagi hampir bukan tersedia yang menggunakannya.
Meskipun begitu, cara ini konsisten sanggup digunakan dan terjadi bersama normal.
Cara ini dapat digunakan terhadap elemen <a>, lalu menuliskan kodenya di atribut href.
Contoh pemanfaatan :

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Javascript</title> </head> <body> <p>Silahkan klik link di bawah ini :</p> <a href="javascript:alert('Hello World! This is the power of Javascript')">Klik di sini</a> </body> </html>

Dan berikut adalah hasilnya :

Menjadi, ketika link <a> ini diklik, maka dia akan terhubung javascript: Dan menjalankan kode Javascript yang tersedia di dalamnya.

Hal ini sama layaknya event onclick yang udah kami bahas di atas tadi.
Bagaimana, memadai ringan tidak? Itulah tadi 4 cara menulis kode Javascript di Html, semoga kalian mampu memahaminya bersama baik.

Baiklah lumayan sekian postingan kali ini, akan saya lanjutkan untuk seri tutorial Javascript di postingan berikutnya. Oleh gara-gara tersebut stay tuned konsisten di sini. Jangan lupa share postingan ini ke teman-teman yang lainnya kalau dirasa berfungsi.

Saya ucapkan Menerima Kasih dan salam Hello World!

Tutorial Javascript | Menambahkan Kode Javascript di HTML

1. Menulis Kode Javascript Secara Internal

2. Menulis Kode Javascript Secara Eksternal

3. Menulis Kode Javascript Secara Inline

4. Menulis Kode Javascript pada URL

Post a Comment

Contact Form