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 mudah dipahami. Show
Namun, sebelum itu kita akan membahas sedikit mengenai apa itu JavaScript dan kelebihannya. Yuk, simak lebih lanjut! Daftar isi Apa Itu JavaScript?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. Baca Juga: Apa Itu React Native? 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. Itulah kenapa saat ini makin banyak orang yang ingin belajar JavaScript. Selain dapat dikombinasikan dengan bahasa pemrograman HTML untuk menghasilkan website yang interaktif, apa kelebihan JavaScript? Baca juga: Perbedaan Java dan JavaScript Kelebihan JavaScriptAda beberapa kelebihan JavaScript yang perlu Anda tahu.
Agar lebih mudah untuk memahami bagaimana JavaScript dan HTML bekerja bersama, berikut cara membuat JavaScript di HTML. Baca juga: Framework JavaScript Cara Membuat JavaScript di HTMLAda 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. Cara Membuat JavaScript Langsung di HTMLPenambahan 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 = “Niagahoster “;
txt1 += “Cara Membuat JavaScript di HTML – Niagahoster”; 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 = “Niagahoster “; txt1 += “Cara Membuat JavaScript di HTML – Niagahoster”; 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. Ket: Hasil Inline JavaScript dengan HTML 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. Baca Juga: Cara Memasukkan Gambar di HTML Cara Membuat JavaScript dan CSS dengan File Terpisah di HTMLSupaya 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. Baca juga: 19 Editor HTML Terbaik yang Bisa Anda Coba! 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 = “Niagahoster “;
txt1 += “Cara Membuat JavaScript di HTML – Niagahoster”; 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. Ket: Hasil JavaScript Dengan File Terpisah Baca juga: JSON Adalah Keuntungan Membuat File JavaScript Terpisah
Baca juga: JQuery Adalah KesimpulanDemikianlah 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 JavaScript menggunakan beberapa panduan di bawah ini.
Subscribe to updatesUnsubscribe from updates Subscribe SekarangDapatkan beragam artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Subscribe sekarang dan raih kesuksesan bersama kami! {{message}} {{message}} SubscribeYasin K Yasin K is a Technical Content Writer for Niagahoster Blog. Other words are unimportant things you will never need to know. Let the content speak for itself :) Next MVC: Pengertian Dasar, Manfaat, dan Contohnya dalam Pengembangan Website » Previous « Cara Instal SSL di Hosting | Gratis dan Berbayar Share Published by Yasin K Tags: htmljavascriptprogrammingWebsite 2 years ago
Related PostRecent Posts
Cara Memindahkan Website dari Subfolder ke Domain UtamaAnda mencoba mengakses website dengan domain utama, tapi hanya muncul daftar direktori Index of/? Itu berarti Anda perlu memindahkan website… 2 days ago
Ini Dia Cara Kerja VPS Hosting, Kelebihan, dan Kekurangannya!Bagaimana cara kerja VPS sebenarnya? Di artikel ini, Anda akan mengetahui bagaimana VPS bekerja serta kelebihan dan kekurangan VPS hosting. 4 days ago
Apa Itu UKM? Pahami Contoh Sampai Perbedaannya dengan UMKM!UKM memiliki peran penting bagi Indonesia. Sebenarnya, apa sih UKM itu? Bagaimana contoh dan tips mengembangkannya? Cek selengkapnya disini! 4 days ago
Cara Install Yarn di Windows, Linux, dan MacOS dengan MudahIngin menggunakan Yarn, tapi tak tahu cara instalnya? Yuk pelajari cara install Yarn di Windows, Linux, dan MacOS lengkap di… 5 days ago
Pengganti Niaga Forum, Ini Layanan Niagahoster Lain untuk Tetap Up to DateIngin tahu sumber referensi resmi dan cara memaksimalkan layanan Niagahoster? Yuk kepoin 3 layanan pengganti Niaga Forum di sini! 5 days ago
Ingin Membuat Konsumen Anda Terpikat? Tawarkan Value Proposition yang Tepat!Value proposition adalah kunci untuk memikat target pasar. Sebab, Anda menjelaskan kenapa produk Anda harus dipilih dibandingkan yang lain. Dengan… Bagaimana cara penggunaan JavaScript dalam HTML?Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head> di antara <body>
Dimanakah kode JavaScript diletakkan?Kode-kode Javascript disimpan pada sebuah file dengan ekstension '.js'. Kemudian file eksternal ini dapat dipanggil dari dokumen HTML dengan menggunakan atribut 'src' dari tag <script>. File eksternal ini dapat digunakan oleh banyak dokumen HTML.
Bagaimana membuat komentar di JavaScript?Komentar multi line diawali dengan /* (garis miring bintang) dan diakhiri dengan */ (bintang garis miring). Kode atau teks apa pun yang berada diantara /* dan */ tidak akan dieksekusi oleh mesin.
Apa fungsi JavaScript dan berikan contohnya?Javascript bisa digunakan untuk membuat fitur beragam seperti drag, drop komponen yang semuanya bisa bermanfaat untuk meningkatkan tampilan (interface) dan pengalaman menggunakan web. Selain itu, programmer juga bisa memperluas fungsi halaman web dengan menulis snippet Javascript untuk add-on pihak ketiga, contohnya ...
|