Kami berusaha menyediakan website yang berguna untuk pengetahuan para pembaca, panduan singkat dan sederhana ini semoga menjadi jalan bagi kalian yang mengalami kesulitan dalam membuat blog di dunia maya, kami mengambil sumber dari blog Panduan Blog Online.com seandainya kalian berkenan langsung mengunjungi website tersebut, selamat menikmati!
Di dalam website, JavaScript biasanya digunakan untuk menghubungkan antara skrip HTML dan CSS. Jadi, pada panduan ini akan coba kita bahas bagaimana cara membuat JavaScript di HTML menggunakan beberapa metode sederhana yang semoga saja mudah untuk dipahami. Namun sebelum itu kita akan membahas sedikit mengenai apa itu JavaScript dan kelebihannya.
JavaScript adalah bahasa pemrograman yang banyak digunakan dalam pengembangan website. Salah satu kegunaannya adalah membuat website yang interaktif. Bahasa ini juga dapat membantu HTML dalam proses pengelolaan file.
Saat bekerja dengan file di dalam sebuah website, JavaScript harus dimuat dan dijalankan dengan markup HTML. Ada beberapa metode yang bisa dilakukan, yaitu menggunakan teknik inline atau file terpisah yang ketika diakses browser akan mengunduhnya terlebih dahulu pada sebuah file yang berbeda.
Konten interaktif yang dihasilkan dari kombinasi antara HTML dan JavaScript membuat tampilan lebih menarik. Pada penerapannya, konten interaktif dapat membuat pengguna tidak hanya mengaksesnya saja, tetapi juga dapat berinteraksi dengan website.
Selain dapat dikombinasikan dengan HTML untuk menghasilkan website yang interaktif, apa kelebihan JavaScript?
Ada beberapa kelebihan JavaScript yang perlu Anda tahu.
Agar lebih mudah untuk memahami bagaimana JavaScript dan HTML bekerja bersama, berikut cara membuat JavaScript di HTML.
Ada dua cara yang bisa dilakukan untuk membuat JavaScript di HTML; cara pertama dengan memasukkan kode JavaScript langsung ke dalam skrip HTML, cara kedua dengan membuat JavaScript di dalam file yang terpisah.
Penambahan kode JavaScript langsung di dalam skrip HTML biasanya dimasukkan ke dalam tag <script> </script>. Hal ini bertujuan untuk memberikan sinyal bahwa kode yang ada di dalamnya adalah kode JavaScript. Tag yang digunakan untuk memanggil JavaScript biasanya ditambahkan di antara tag <head> atau di antara tag <body>.
index.html |
| <!DOCTYPE html> <html lang=”en-US”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <title>Niagahoster</title> </head> <body> </body> </html> |
Kode di atas merupakan contoh dari kode HTML yang belum mengandung baris kode JavaScript. Agar terlihat contoh bagaimana JavaScript bekerja, tambahkan baris perintah berikut ke dalam kode di atas.
| var txt1 = “Panduan Blog Online “; txt1 += “Cara Membuat JavaScript di HTML – Panduan Blog Online”; alert(txt1) |
Baris kode di atas digunakan untuk menampilkan kotak dialog yang berisi teks “txt1” pada halaman browser.
Agar HTML dapat membaca script JavaScript, maka langkah yang perlu dilakukan adalah dengan menambahkan kode di atas ke dalam tag <script>. Hasilnya kurang lebih seperti ini.
index.html |
| <!DOCTYPE html> <html lang=”en-US”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <title>Niagahoster</title> <script> var txt1 = “Panduan Blog Online “; txt1 += “Cara Membuat JavaScript di HTML – Panduan Blog Online”; alert(txt1) </script> </head> <body> </body> </html> |
Anda juga dapat menyesuaikan sesuai dengan kreatifitas masing-masing. Kurang lebih hasil dari skrip di atas akan memunculkan tampilan seperti ini.
Struktur skrip seperti di atas sudah jarang dipakai karena terkadang baris JavaScript digunakan berulang-ulang pada beberapa file. Di bawah ini adalah contoh cara membuat JavaScript di HTML menggunakan file yang terpisah.
Ada beberapa keuntungan membuat JavaScript di HTML seperti kemudahan dalam melakukan maintenance, lebih mudah dibaca, dan mempercepat page load.
Supaya lebih mudah untuk memahami bagaimana cara membuat JavaScript di HTML dengan file terpisah, kita akan membuat folder untuk menyimpan file JavaScript terlebih dahulu. Strukturnya akan menjadi “root/js/script.js”. Pada script.js akan diisi dengan skrip JavaScript.
| index.html |
| <!DOCTYPE html> <html lang=”en-US”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <title>Niagahoster</title> </head> <body> <script src=”js/script.js”></script> </body> </html> |
Sedangkan di dalam file script.js isi skripnya seperti di bawah ini.
script.js |
| var txt1 = “Panduan Blog Online “; txt1 += “Cara Membuat JavaScript di HTML – Panduan Blog Online”; document.body.innerHTML = “<h1>” + txt1 + “</h1>” |
Pada tabel dia atas, index.html akan memanggil file “../js/script.js” untuk mengambil beberapa skripnya. Kurang lebih tampilannya akan menjadi seperti ini.
Demikianlah cara membuat JavaScript di HTML dengan contoh sederhana. Anda dapat mengembangkan sesuai dengan kreatifitas masing-masing. Tidak hanya memudahkan dalam pengembangan website, tetapi juga memaksimalkan kinerja website.
Anda juga dapat mengembangkan website menggunakan beberapa panduan di bawah ini.
Source:niagahoster.com
No comments:
Post a Comment