Lompat ke konten Lompat ke sidebar Lompat ke footer

Belajar Cara Penulisan dan Penggunaan Kode Javascript pada HTML

Assalamualaikum, pada artikel kali ini admin akan membagikan penjelasan mengenai belajar cara penulisan dan penggunaan kode javascript pada HTML. Pada aritkel ini kita akan mebahas secara rinci mengenai penulisan serta penggunakan suatu kode javascript data document HTML ataupun pada document PHP. Javascript yang merupakan bahasa pemrograman yang berjalan pada web browser tentunya digunakan untuk dapat membuat suatu fungsi sehingga website tersebut menjadi lebih dinamis.

Ada beberapa cara untuk dapat menuliskan kode javascript ini pada html, berikut ini penjelasan lengkapnya.

Javascript itu merupakan suatu bahasa pemrograman yang berfungsi untuk dapat membuat serta berinteraksi pada suatu halaman website, ataupun suatu aplikasi yang dibuat ataupun dibangun berbasis website

Javascript ini termasuk kedalam suatu jenis bahasa script, yang digunakan dalam suatu file HTML. untuk dapat menginputkan serta memasukan kode javascript kedalam HTML, pada javascript juga menyediakan 4 alternatif yaitu seperti dibawah ini:

  1. Menggunakan suatu tag <script> atau biasa kita sebut dengan (Internal Javascript).
  2. Menggunakan suatu tag <script scr=""> yang sering disebut (external javascript) 
  3. Menggunakan suatu Event Handler pada (Inline Javascript)
  4. Menggunakan URL untuk memanggil script (href="javacript")

Dalam artikel kali ini admin akan menbahas mengenai 4 metode cara penulisan kode javascript pada document HTML

1. Tag <script>

Cara yang paling umum dipakai ialah dengan cara menuliskan dalam suatu tag yaitu tag <script>. Tag ini tentunya dapat dimuat pada bagian <head>, <footer>, ataupun pada bagian <body>.  Penulisan kode javascrip ini dapat kita katakan sebagai penulisan kode javascript secara internal dengan cara kita menyisipkan langsung suatu syntax javascript pada suatu dokument HTML ataupun teman- teman dapat mengimplementasikannya pada document PHP karena dapat berjalan dapat kedua dokument tersebut.
Silahkan teman- teman perhatikan contoh penulisannya dibawah ini:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Penulisan dan Penggunaan Javascript</title>
    <script>
    console.log("Hello, Selamat datang di forumkoding");
    </script>
</head>
<body>

<script>
document.write("Pembelajaran seputar javascript!");
</script>
</body>
</html>
Pada script diatas terdapat tulisan document. document merupakan itu merupakan suatu perintah yang wajib kita tulis sedangkan write merupakan suatu metode untuk dapat menampung tulisan yang akan kita tampilkan.
Setelah teman- teman mengikuti script diatas, silahkatan jalankan script tersebut pada web browser masing- masing. Nah selanjutnya kita akan membahas dengan menggunakan cara File Eksternal silahkan teman- teman simak pembahasan dibawah ini:

2. File Eksternal

Dengan menggunakan file eksternal ini tentunya kita tidak menginginkan kode javascript tersebut tercampur dengan kode HTML, kita tentunya dapat menuliskan pada file yang terpisah. Lalu bagaimana cara untuk memanggilnya? Caranya, silahkan teman- teman buat terlebih dahulu sebuah file yang berektensi .js,  Silahkan teman- teman tulis code dibawah ini sebagai contoh nya:
// eksternal.js
alert("Hallo sahabat forumkoding ini kode dari File Eksternal");
Setelah kalian menuliskan kode dan membuat file .js nya, tentunya kita perlu menghubungkan file eksternal tersebut dengan file HTML. Caranya, silahkan gunakan tag <script> dengan attrinbutnya yaitu src untuk dapat menentukan lokasi file javascriptnya.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>

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

</head>
<body>

</body>
</html>
Pantinya teman- teman mudah untuk memahami pembahasan diatas mengenai cara file eksternal, nah selanjutnya kita akan belajar mengenai penggunaan Atribut Event, Silahkan teman- teman simak kembali pembahasan dibawah ini.


3. Atribut Event

Pada cara yang ketiga ini tentunya sering digunakan untuk dapat memanggil fungsi pada suatu event terentu. Misalnya ketika suatu element tersebut di klik, maka akan menjalankan fungsi dari javascript tersebut. Silahkan ikuti contoh perhatikan script dibawah ini:
<button onclick="alert('Ok Terima kasih!')">Klik donk!</button>
Yang perlu teman- teman- ketahui, selain menggunakan event onclick tentunya ada juga yang event- event yang lainnya, seperti onsubmit, onload, onmouseover, onmouseout serta ondoublesclick.

Ada satu cara lagi yang tentunya dapat teman- teman gunakan yaitu dengan menggunakan URL, bagaimana penerapannya? Silahkan simak pembahasan dibawah ini.

4. Penggunaan URL

Cara yang selanjutnya kita dapat menggunakan metode penulisan javascript pada URL. Cara ini jarang digunakan oleh para programmer namun, tentunya teman- teman perlu mengetahui serta memahaminya. Penulisan javascript pada URL ini menggunakan suatu protokol Javascript. misalnya silahkan teman- teman menulisakan kode dibawah ini pada bagian URL web browser.
javascript:alert("ini merupakan alert Javascript")
Silahkan teman- teman jalankan pada code tersebut, dan lihat hasilnya.

Lalu bagaimana kita dapat menggunakan cara tersebut dalam document HTML?

Tentunya kita dapat menggunakan pada tag <a>, kemudian mengisi kode javascript tersebut pada bagian atribut href. Kesimpulan dari cara ini kita bisa mengganti suatu event yaitu onclick.
<a href="javascript:alert('Hello, hebat bukan?')">Klik saya</a> 
Selanjutnya silahkan teman- teman jalankan contoh perogram tersebut.

Dalam tutorial kali ini kita telah mempelajari mengenai 4 cara penulisan kode javacsript dalam document HTML. Jika teman- teman perhatikan biasanya kode javascript ini tersimpan pada bagian <head>. Tetapi tidak selalu harus disimpan pada bagian tersebut. Serta javascript ini juga dapat dijalankan pada document ber ekstentsi PHP.

Mungkin sekian yang dapat admin jelaskan serta sampaikan mudah- mudahan artikel ini dapat bermanfaat bagi teman- teman yang membaca. Terimakasih sudah berkunjung dan membaca artikel ini mengenai : Belajar Cara Penulisan dan Penggunaan Kode Javascript pada HTML. Semoga bermanfaat -- Salam Success :)

By: Muhammad Rizal Supriadi