Beranda » Pengembangan & Desain Web » Pemrograman Dasar » Cara Membuat JavaScript di HTML Sederhana
Cara Membuat JavaScript di HTML Sederhana1 Maret 2021 3 mnt dibaca
Di situs web, JavaScript biasanya digunakan untuk menghubungkan antara skrip HTML dan CSS. Nah, pada panduan kali ini kita akan mencoba membahas cara membuat JavaScript di HTML menggunakan beberapa cara sederhana yang mudah dipahami
Namun sebelumnya kita akan membahas sedikit tentang apa itu JavaScript dan kelebihannya. Yuk, baca selengkapnya.
Daftar Isi
Apa itu JavaScript?
JavaScript adalah bahasa pemrograman yang banyak digunakan dalam pengembangan situs web. Salah satu kegunaannya adalah untuk membuat website interaktif. Bahasa ini juga dapat membantu HTML dalam proses manajemen file
Baca Juga. Apa itu Bereaksi Asli?
Saat bekerja dengan file di situs web, JavaScript harus dimuat dan dijalankan dengan markup HTML. Ada beberapa cara yang bisa dilakukan yaitu menggunakan teknik inline atau file terpisah yang ketika diakses oleh browser akan mendownload terlebih dahulu di file yang berbeda
Konten interaktif yang dihasilkan dari kombinasi HTML dan JavaScript menjadikan tampilan lebih menarik. Dalam penerapannya, konten interaktif dapat membuat pengguna tidak hanya mengaksesnya, tetapi juga berinteraksi dengan website tersebut
Itu sebabnya saat ini semakin banyak orang yang ingin belajar JavaScript
Selain dapat dipadukan dengan bahasa pemrograman HTML untuk menghasilkan website yang interaktif, apa saja keunggulan dari JavaScript?
Baca juga. Perbedaan antara Java dan JavaScript
Keuntungan JavaScript
Ada beberapa keunggulan JavaScript yang perlu Anda ketahui
- Meringankan Beban Server . JavaScript menggunakan sistem sisi klien. Client-side Scripting adalah bahasa pemrograman web yang pemrosesan datanya dilakukan oleh komputer pengguna/pengunjung. Alhasil, penggunaan resource di server akan lebih ringan.
- Prosedur . JavaScript dapat mencakup semua kemampuan bahasa prosedural, seperti pembulatan, pemeriksaan kondisi, perulangan, dan beberapa kemampuan yang dapat dijalankan di halaman web.
- Multi Platform . JavaScript dapat berjalan di berbagai platform, membuatnya mudah untuk diintegrasikan dan dimodifikasi.
- Mudah Dipelajari . JavaScript mudah dipelajari karena sintaks yang digunakan mirip dengan bahasa Inggris. Bahasa pemrograman ini menggunakan Document Object Model (DOM JavaScript) yang menyediakan banyak fungsi pada berbagai objek sehingga mudah untuk dikembangkan.
- Mudah di-Debug dan Diuji . Kemudahan membaca sintaks JavaScript membuat proses debug dan pengujian mudah dilakukan. Ketika terjadi kesalahan, pesan masalah akan muncul.
- Tidak Perlu Kompilasi . JavaScript tidak membutuhkan proses kompilasi sehingga tidak membutuhkan compiler. Saat dibaca selama pengembangan situs web, bahasa pemrograman ini dikenal sebagai tag HTML.
Agar lebih mudah memahami bagaimana JavaScript dan HTML bekerja sama, berikut adalah cara membuat JavaScript di HTML
Baca juga. Kerangka JavaScript
Cara Membuat JavaScript di HTML
Ada dua kemungkinan cara untuk membuat JavaScript dalam HTML;
Cara Membuat JavaScript Langsung di HTML
Penambahan kode JavaScript langsung di dalam skrip HTML biasanya dimasukkan ke dalam tag . 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 atau di antara tag .
indeks. html
Penghosting Bisnis
Kode di atas adalah contoh kode HTML yang belum memuat sebaris kode JavaScript. Untuk melihat contoh cara kerja JavaScript, tambahkan baris perintah berikut ke kode di atas
var txt1 = “Penghosting Bisnis “;
txt1 += “Cara Membuat JavaScript di HTML – Niagahoster”;
waspada(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 . Hasilnya kurang lebih seperti ini.
indeks. html
Penghosting Bisnis
var txt1 = “Penghosting Bisnis “;
txt1 += “Cara Membuat JavaScript di HTML – Niagahoster”;
waspada(txt1)
Anda juga dapat menyesuaikan sesuai kreativitas Anda. Kurang lebih hasil script sdi atas akan muncul tampilan seperti ini.
Struktur skrip seperti di atas jarang digunakan karena terkadang baris JavaScript digunakan berulang kali di beberapa file. Di bawah ini adalah contoh cara membuat JavaScript dalam HTML menggunakan file terpisah
Baca Juga. Cara Menyisipkan Gambar di HTML
Cara Membuat JavaScript dan CSS dengan File Terpisah di HTML
Agar lebih mudah memahami 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". Di naskah. js akan diisi dengan skrip JavaScript
Baca juga. 19 Editor HTML Terbaik yang Dapat Anda Coba
indeks. html
Penghosting Bisnis
Saat berada di file skrip. konten skrip js seperti di bawah ini
skrip. js
var txt1 = “Penghosting Bisnis “;
txt1 += “Cara Membuat JavaScript di HTML – Niagahoster”;
document.body.innerHTML = “” + txt1 + “
”
Pada tabel di atas, index. html akan memanggil file “. /js/skrip. js” untuk mengambil beberapa skripnya. Ini akan terlihat lebih atau kurang seperti ini
Baca juga. JSON Adalah
Keuntungan Membuat File JavaScript Terpisah
- Perawatan yang mudah dilakukan. Sistem yang menggunakan kode program JavaScript terpisah lebih mudah dipelihara. Hal ini dikarenakan developer cukup mencari file yang ingin diubah atau dimodifikasi jika ada perubahan atau masalah
- Lebih Mudah Dibaca. File JavaScript yang terpisah memudahkan pengembang untuk membaca sintaks dari satu file yang berisi campuran bahasa pemrograman
- Mempercepat Pemuatan Halaman. Pemuatan halaman akan lebih cepat, karena beberapa sistem menerapkan cache ke sistem. Jadi setelah file JavaScript di-cache, itu dapat meningkatkan kecepatan memuat halaman
Baca juga. jQuery Apakah
Kesimpulan
Itulah cara membuat JavaScript di HTML dengan contoh sederhana. Anda dapat mengembangkan sesuai dengan kreativitas Anda. Ini tidak hanya memfasilitasi pengembangan situs web, tetapi juga memaksimalkan kinerja situs web
Anda juga dapat mengembangkan situs web JavaScript menggunakan beberapa panduan di bawah ini
- JavaScript dan CSS khusus di WordPress
- Cara Membuat Situs Web
- Javascript AJAX
- Membuat Penghitung Waktu Mundur dengan JavaScript
Membagikan
Yasin K Ikuti Yasin K adalah Penulis Konten Teknis untuk Blog Niagahoster. Kata lain adalah hal-hal tidak penting yang tidak perlu Anda ketahui. Biarkan konten berbicara sendiri. )
Berlangganan sekarang
Dapatkan berbagai artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Berlangganan sekarang dan raih kesuksesan bersama kami