Cara Menulis Kode Javascript pada HTML: yang Wajib dan Benar
Pada Tutorial ini kita akan belajar bagaimana cara menuliskan kode atau perintah javascript dan menjalankannya.
Kamu Siap?...
Sebelum itu anda harus mempersiapkan kode editor yang gunanya untuk menuliskan kode atau perintah javascript.
ada banyak jenis kode editor dan salah satunya yang akan saya gunakan dalam Tutorial ini adalah Visual Studio Code
Jika anda tidak ingin menggunakan kode editor, anda dapat menggunakan Notepad bawaan komputer tapi itu saya tidak sarankan!.
Silahkan pilih dan Download salah satu
Menuliskan kode Javascript dan Menjalankannya?
Seperti yang anda ketahui ditutorial sebelumnya pengenalan dasar javascript. javascript mampu berjalan di sisi client atau di server.
Ada dua cara menuliskan kode javascript yaitu...
menuliskan kode javascript pada html dan menjalankannya didalam browser
atau
menuliskan kode javascript tanpa html dan menjalankannya di sistem operasi(OS).
Untuk tutorial ini kita akan menuliskan kode javascript pada html dan menjalankannya didalam browser...
Ada 4 cara menuliskan kode javascript pada html...
dari keempat cara tersebut, ada yang sering digunakan ada juga yang tidak disarankan.
Apa saja cara keempat itu?. mari kita bahas!...
1. Menuliskan Javascript dalam Tag <script>
menuliskan kode atau perintah javascript pada tag <script> merupakan hal umum yang sering programmer javascript gunakan.
Tag <script> dapat kita letakkan didalam tag <head> atau didalam tag <body>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menuliskan kode javascript didalam tag script</title>
<script>
alert('menulis javascript didalam tag script!...');
</script>
</head>
<body>
<script>
document.write('menulis javasript didalam tag script!...');
</script>
</body>
</html>
Output Program:
menuliskan kode javascript didalam tag <script> sah-sah saja.. tapi menuliskan tag <script> didalam tag <head> tidak disarankan..
Kenapa?..
Karena intrepereter akan membaca kode program kita, mulai dari Kiri-Atas sampai selesai.. menuliskan <script> didalam tag head sangat berpengaruh jika anda berinteraksi dengan elemen tag HTML menggunakan DOM.
hal yang kita lakukan diatas sangat sederhana.. suatu saat kode program yang anda buat akan semakin kompleks.. dan itu kita akan lakukan dengan cara kedua.
2. Menuliskan Javascript secara Eksternal
Suatu saat kode program yang anda buat akan semakin kompleks dan itu tidak disarankan menggunakan cara pertama...
di cara kedua ini kita akan menuliskan kode javascript diluar file Html.. kita akan menuliskannya di file terpisah yang berekstensi namafile.js.
Bagaimana caranya?...
caranya.. silahkan anda buat file html dan juga file javascript
sebagai contoh file yang akan saya buat dengan nama index.html dan main.js
Berikut ini isi file index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Belajar Javascript</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
document.write('Hello World!...');
Lalu bagaimana kalau file javascriptnya di folder yang berbeda seperti
contoh:
<script src="./script/main.js"></script>
3. Menuliskan Javascript Didalam Attribute
Cara ketiga ini kita dapat menuliskan kode javascript didalam attribute html. seperti memanggil Events
Contoh:
<button onclick="console.log('Hello World!...') ">Button</button>
Output Program:
contoh kode diatas kita memanggil sebuah event onclick untuk melakukan kejadian ketika tag button html di klik.. kejadiannya adalah menampilkan text ke console.
contoh kasus event diatas bukanlah hal satu-satunya onclick saja.. ada banyak jenis event yang dapat kita implementasikan Referensi Event.. dan event ini kita akan bahas di tutorial DOM.
Catatan: menuliskan kode javascript dengan cara ketiga ini.. saya tidak sarankan
Kenapa?..
karena kita menggabungkan kode html dan javascript dan hal ini tidak bagus dilakukan.. jika hanya kasus kecil seperti ini tidak jadi masalah.. bagaimana kalau kasusnya sudah semakin kompleks dan kita akan kesusah unutuk memantenace kode program.
Rangkuman Tutorial
Jadi manakah cara yang baik untuk menuliskan kode javascript?..
Saya sendiri merekomondasikan cara ke2 jika kode program javascript anda kompleks jika tidak terlalu kompleks gunakan cara pertama dan cara ke tiga.
Sekian Tutorial beberapa cara menuliskan kode javascript didalam tag html dan menjalankannya dibrowser
jika kurang paham atau tidak mengerti silahkan berkomentar...
Posting Komentar