Tuesday, February 5, 2019

Mempelajari Penulisan Kode Javascript pada HTML

Mempelajari Penulisan Kode Javascript pada HTML

Javascript adalah bahasa pemrograman yang beroperasi pada browser yang harus di tulis di dalam kode HTML. Ada 4 cara penulisan code javascript pada HTML.

Cara Pertama : Tag <script>

Cara umum yang pertama adalah menuliskan code javascropt dalam tag <script>. Tag <script> bisa dibuat di dalam tag <head> yang ada pada html, mauapun di dalam tag <body> yang ada pada html. 

Contoh Codingnya, kalian bisa mencobanya dengan cara menuliskannya pada notepad, notepad++, sublimetext atau editor text yang lainnya dan save as sebagai file .html, atau bisa coba juga disini Editor HTML FajarYusuf.Com :


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Penulisan Javascript</title>
    
    <script>
    console.log("Ini adalah output untuk console");
    </script>
    
</head>
<body>
<script>
document.write("Ini Javascript yang muncul dibody!");
</script>
</body>
</html>


Hasilnya :

Mempelajari Penulisan Kode Javascript pada HTML



Cara Kedua : Melalui File Eksternal

Jika kalian tidak ingin kode Javascript tercampur dengan HTML, kalian bisa menuliskannya pada file yang terpisah. Caranya, buatlah sebuah file yang berekstensi .js untuk ekstensi file javascript, misalnya isinya seperti coding berikut :

// file-eksternal.js
alert("Ini adalah Output dari hasil Javascript file eksternal");


Setelah menyimpan kode diatas, kita perlu menghubungkan file eksternal tersebut dengan file HTMLnya. Caranya dengan menggunakan tag <script> dengan atribut src untuk menentukan lokasi file Javascriptnya (pada contoh berikut saya menentukan lokasi file javascript dan htmlnya pada satu folder) :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coding penulisan Javascript</title>
<script src="file-eksternal.js"></script>
</head>
<body>
</body>
</html>

Hasilnya :
Mempelajari Penulisan Kode Javascript pada HTML



Cara Ketiga : Menggunakan Atribut Event

Untuk cara berikutnya ini sering digunakan untuk memanggil fungsi pada event atau tindakan terentu. Misalnya ketika suatu elemen atau objek diklik, maka akan menjalankan proses dari coding Javascript, seperti contoh coding berikut :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Penulisan Javascript</title>
    
    <script>
    console.log("Ini adalah output untuk console");
    </script>
    
</head>
<body>
<button onclick="alert('Ok Terima kasih!')">Klik donk!</button>
</body>
</html>

Hasilnya :

Mempelajari Penulisan Kode Javascript pada HTML


Tidak hanya event onclick pada javascript ada berbagai macam event-event yang lainnya, seperti onsubmit, onload, ondoubleclick, onmouseover, onmouseout, dan sebagainya.

Cara Keempat : Menggunakan URL

Untuk cara yang terakhir yaitu penulisan Javascript pada URL. Cara ini hampir jarang digunakan, tetapi kita juga perlu mengetahuinya untuk mengenal lebih javascript. Penulisan Javascript pada URL dengan cara menggunakan protokol Javascript. Misalnya, cobalah untuk menuliskan kode seperti ini pada URL browser.
javascript:alert("Ini Output Dari Javascript")
Hasilnya akan ada output Javascript yang dieksekusi oleh browser.

Lalu, bagaiaman kita menggunakan cara ini di HTML?

Cara ini bisa kita gunakan pada tag <a>, kemudian mengisi kode javascript pada atribut href. Cara ini bisa menggantikan fungsi javascript event onclick.

Contoh Codingnya :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Penulisan Javascript</title>
    
    <script>
    console.log("Ini adalah output untuk console");
    </script>
    
</head>
<body>
<a href="javascript:alert('Mantap betul !!!')">Klik Donk</a>
</body>
</html>


Hasilnya :
Mempelajari Penulisan Kode Javascript pada HTML


Seseorang yang ingin membagi pengalaman dan ilmu yang berguna untuk para pembaca FajarYusuf.Com :)

Cobalah untuk memilih Pelajaran Pemrograman dan belajar dari Materi Pertama
EmoticonEmoticon


TENTANG SITUS

SITUS INI ADALAH SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.

https://smallseotools.com/