Cara menggunakan apa itu inline javascript?

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.

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 JavaScript

Ada beberapa kelebihan JavaScript yang perlu Anda tahu.

  1. Meringankan Beban Server: JavaScript menggunakan sistem client-side. Client-side Scripting adalah bahasa pemrograman web yang pengolahan datanya dilakukan oleh komputer pengguna/pengunjung. Alhasil, penggunaan sumber daya di server akan lebih ringan.
  2. Prosedural: JavaScript dapat mencakup semua kemampuan bahasa prosedural, seperti pembulatan, pemeriksaan kondisi, looping, dan beberapa kemampuan yang dapat dijalankan di halaman web.
  3. Multi Platform: JavaScript dapat dijalankan di berbagai platform, sehingga mudah untuk diintegrasikan dan dimodifikasi.
  4. Mudah Dipelajari: JavaScript mudah untuk dipelajari karena sintaks yang digunakan mirip dengan Bahasa Inggris. Bahasa pemrograman ini menggunakan model Document Object Model (DOM JavaScript) yang menyediakan banyak fungsionalitas pada berbagai objek sehingga mudah untuk dikembangkan.
  5. Mudah Melakukan Debug dan Tes: Kemudahan membaca sintaks JavaScript membuat proses debug dan tes mudah untuk dilakukan. Apabila terjadi error, akan muncul pesan masalah yang terjadi.
  6. Tidak Membutuhkan Kompilasi: JavaScript tidak membutuhkan proses kompilasi sehingga tidak memerlukan kompiler. Pada saat dibaca saat pengembangan website, bahasa pemrograman ini dikenali sebagai tag HTML.

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 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.

Cara Membuat JavaScript Langsung di HTML

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 = “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 HTML

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.

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

  • Mudah Melakukan Maintenance: Sistem yang menggunakan kode program JavaScript terpisah lebih mudah untuk dilakukan maintenance. Hal ini dikarenakan developer cukup mencari file yang ingin diubah atau dimodifikasi jika terjadi perubahan atau masalah.
  • Lebih Mudah Dibaca: File JavaScript yang terpisah memudahkan developer saat membaca sintaks daripada satu file yang berisi campuran bahasa pemrograman.
  • Mempercepat Page Load: Page load akan lebih cepat, dikarenakan beberapa sistem menerapkan cached pada sistemnya. Sehingga sekali file JavaScript di-cache maka itu dapat meningkatkan kecepatan page load.

Baca juga: JQuery Adalah

Kesimpulan

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 JavaScript menggunakan beberapa panduan di bawah ini.

  • Custom JavaScript dan CSS di WordPress
  • Cara Membuat Website
  • AJAX JavaScript
  • Membuat Countdown Timer dengan JavaScript

Subscribe to updatesUnsubscribe from updates

Subscribe Sekarang

Dapatkan beragam artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Subscribe sekarang dan raih kesuksesan bersama kami!

{{message}}

{{message}}

Subscribe

Yasin 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 Post

  • 10 Rekomendasi Website Belajar Coding Terbaik untuk Anda!

    Siapa bilang coding adalah skill yang hanya bisa dipelajari lewat pendidikan formal?  Dengan adanya website…

  • CI/CD Adalah: Pengertian, Manfaat, Proses, Tools untuk CI/CD

    CI/CD adalah metode yang bisa mempersingkat proses pengembangan software. Yuk kenali apa itu CI/CD, manfaat,…

  • Panduan Belajar Pemrograman Web Bagi Pemula

    Anda tertarik untuk belajar web programming tapi bingung harus mulai dari mana? Tenang saja! Di…

Recent Posts

  • Tutorial

Cara Memindahkan Website dari Subfolder ke Domain Utama

Anda mencoba mengakses website dengan domain utama, tapi hanya muncul daftar direktori Index of/? Itu berarti Anda perlu memindahkan website…

2 days ago

  • Tutorial

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

  • Insight Bisnis

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

  • Tutorial

Cara Install Yarn di Windows, Linux, dan MacOS dengan Mudah

Ingin menggunakan Yarn, tapi tak tahu cara instalnya? Yuk pelajari cara install Yarn di Windows, Linux, dan MacOS lengkap di…

5 days ago

  • Company Updates

Pengganti Niaga Forum, Ini Layanan Niagahoster Lain untuk Tetap Up to Date

Ingin tahu sumber referensi resmi dan cara memaksimalkan layanan Niagahoster? Yuk kepoin 3 layanan pengganti Niaga Forum di sini!

5 days ago

  • Insight Bisnis

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 ...