Belajar Javascript Part 3 cara menulis kode javascript

Masih bingung bagaimana menulis kode javascript pada halaman web? Pas banget kali ini saya akan membahas hal ini.

Dalam menempatkan kode javascript kita dapat menempatkannya didalam elemen <script>
Lihat contohnya sebagai berikut

<script>    document.write("Hello World!");</script>

Tapi dimanakah kita harus meletakan elemen <script> ini didalam website?

Internal Javascript

Untuk penempatannya dapat kita letakan didalam elemen <head> atau pada elemen <body>, inilah yang disebut dengan internal javascript.

Karena kode yang kita letakan berada didalam file html yang kita buat.

Untuk metode internal javascript. Penempatan element <script> memiliki 2 cara yaitu

1. Javascript pada elemen <head>

Berikut contoh <script> yang berada di dalam elemen <head>.

<!DOCTYPE html><html><head>   <title> Try It Yourself </title>   <script type="text/javascript">      function myFunc() {         document.getElementById("demo").innerHTML = "Hello Everyone!";      }   </script></head><body>   <p id="demo"> Hello World! </p>   <button type="button" onclick="myFunc()"> Change Value </button></body></html>

Disarankan untuk meletakkan <Script> sebelum tag penutup </head>.

2. JavaScript dalam elemen <body>

Dalam contoh ini, <script> berada di dalam elemen <body>.

<!DOCTYPE html><html><head>   <title> Try It Yourself </title></head><body>   <p id="demo"> Hello World! </p>   <button type="button" onclick="myFunc()"> Change Value </button>   <script type="text/javascript">      function myFunc() {         document.getElementById("demo").innerHTML = "Hello Everyone!";      }   </script></body></html>

Disarankan untuk meletakkan <script> sebelum tag penutup </body>.

Yang menjadi pertanyaan, haruskah kita meletakkan <script> di dalam elemen <head> atau <body>?

Apa bedanya?

Ketika <script> berada di dalam <head>, ia akan dimuat terlebih dahulu sebelum konten halaman selesai dirender oleh browser.

Saat berada di dalam <body> , yang terjadi <script> akan dimuat setelah konten halaman (elemen HTML) dimuat terlebih dahulu.

Pada contoh ini, ketika tombol diklik, konten elemen <p> berubah.

<!DOCTYPE html><html><head>   <title> Try It Yourself </title>   <script type="text/javascript">      document.getElementById("btn").addEventListener("click", function() {         document.getElementById("demo").innerHTML = "Hello Everyone!";      });   </script></head><body>   <p> This would not work because the event listener loaded first before the HTML element. </p>   <p id="demo"> Hello World! </p>   <button id="btn"> Change Value </button></body></html>

Namun, ini tidak akan berhasil karena kodingan event listener JS diatas dimuat terlebih dahulu sebelum elemen HTML.

Untuk saat ini, kita tidak akan membahas cara kerja dari eventlistener. Fokus saja pada penempatan script.

Jika kita meletakkan <script> sebelum tag penutup </body>.

Semuanya tentu dapat berfungsi, karena elemen HTML dimuat terlebih dahulu sebelum event listener JS diatas dijalankan.

<!DOCTYPE html><html><head>   <title> Try It Yourself </title></head><body>   <p id="demo"> Hello World! </p>   <button id="btn"> Change Value </button>   <script type="text/javascript">      document.getElementById("btn").addEventListener("click", function() {         document.getElementById("demo").innerHTML = "Hello Everyone!";      });   </script></body></html>

disarankan untuk meletakkan tag <script> di badan saat menggunakan JavaScript internal.

Eksternal Javascript

JavaScript juga dapat ditempatkan di file eksternal.

File JavaScript memiliki ekstensi nama file .js misalnya. script.js.

Menggunakan file skrip eksternal bermanfaat ketika beberapa halaman web menggunakan skrip yang sama.

Itu juga mengatur kode dan membantu menjaga keterbacaan ketika JavaScript dipisahkan dari HTML.

Berikut ini contohnya:

<!DOCTYPE html><html><head>   <title> Try It Yourself </title>   <script src="script.js"></script></head><body>   <p id="demo"> Hello World! </p>   <button type="button" onclick="myFunc()"> Change Value </button></body></html>

File script.js berisi kode berikut:

function MyFunc(){    document.getElementById("demo").innerHTML = "Hello Everyone";}

Seperti yang dapat dilihat diatas, kita telah menempatkan skrip eksternal di <head> .

Namun, file JavaScript eksternal dapat ditempatkan di tempat yang sama dengan JavaScript internal.

Skrip eksternal dan internal berperilaku dengan cara yang sama.

Dalam contoh di atas, skrip eksternal terletak di folder yang sama dengan dokumen HTML saat ini.

Kitapun juga bisa meletakkannya di lokasi lain dipenyimpanan direktori folder yang berbeda.

Dalam contoh ini skrip eksternal terletak di dalam folder js.

Folder js terletak di folder yang sama dengan halaman HTML saat ini.

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

Dalam contoh lain berikut skrip eksternal terletak di dalam folder js.

Akan tetapi folder js tersebut terletak di direktori root http://www.example.com .

<script src="http://www.example.com/js/script.js"></script>

Nilai atribut src merupakan jalur file untuk pemanggilan javascript.

Bagaimana sudah paham tentang bagaimana menulis kode javascript? Tulis komentar teman-teman dibawah artikel ini. Dengan senang hati saya akan menjawab pertanyaan yang kamu berikan

Techo