Belajar Javascript #1 – Membuat Javascript di html

Javascript / Oleh

Pada artikel kali ini saya akan membagikan tutorial cara membuat atau menggunakan kode program javascript di html. Sebelum lanjut ke pembahasan, sebaiknya anda mengenal dulu apa itu javascript, persiapan dalam membuat program, dan Console.

Apa itu javascript ?

Javascript adalah bahasa pemrograman yang digunakan dalam membuat website agar lebih dinamis. Awalnya Javascript dirancang untuk berjalan di atas browser, namun sesuai perkembangan teknologi juga dapat digunakan pada smartphone, sisi Server, Game, IoT, Desktop, dsb. JavaScript merupakan bahasa pemrograman jenis interpreter, jadi tidak memerlukan compiler untuk menjalankannya.

Persiapan membuat javascript di html

Peralatan /bahan yang harus disiapkan sebelum menulis program Javascript yaitu :

  1. Web Browser (Google Chrome, Firefox, Opera, dll)
  2. Teks Editor (Visual Studio Code,Atom, Brackets dll)
  3. Nodejs

Mengenal Console JavaScript

Fungsi dari console adalah anda bisa melihat hasilnya program JavaScript pada web browser. Caranya cukup mudah, yaitu sebagai berikut.

  • Buka terlebih dahul Google Chrome,
  • kemudian klik kanan pilih “Inspect”
  • Lalu pilih Console.

Di dalam console, kita juga dapat menulis fungsi atau kode-kode javascript dan hasilnya akan langsung ditampilkan pada web browser.

console.log("Haloo");
alert("belajar javascript di praktekotodidak.com");

Hasilnya :

Jika anda menggunakan Nodejs, maka cara mengakses console adalah dengan mengetik perintah ”node” pada Terminal.

Cara membuat javascript di html

Ada 3 cara yang akan saya jelaskan dalam membuat kode program javascript di html yaitu

  1. Kode Javascript ditempel langsung pada HTML (Embed)
  2. (Inline) kode Javascript ditulis pada atribut HTML
  3. Kode Javascript ditulis terpisah dengan file HTML (Eksternal)

1. Membuat Penulisan Kode javascript dengan Embed

Pada langkah pertama ini, kita menggunakan tag <script> untuk menempelkan (embed) kode Javascript pada HTML. Tag ini dapat ditulis di dalam tag <head> dan <body>. Tulisan yang bagus adalah menuliskannya di dalam <body>, karena akan membuat web di-load lebih cepat.

BACA JUGA : JSON : definisi, fungsi, struktur dan tipe data

Adapun Langkah-langkah Penulisan Kode javascript dengan Embed di contohkan sebagai berikut :

  • Silahkan buka teks editor, kemudian buat file baru bernama hello_world.html dan isi dengan kode berikut:
<!DOCTYPE html>
<html>
<head>
    <title>Hello World Javascript</title>
</head>
<body>
    <script>
        console.log("Saya belajar Javascript");
        document.write("Hello World!");
    </script>
</body>
</html>
  • Jika anda menggunakan teks editor Visual Code, maka akan terlihat seperti gambar di bawah ini:
membuat javascript di html
  • Setelah itu save file tersebut dengan nama hello_world.html, kemudian buka file tersebut dengan web browser.
membuat javascript di html
  • Maka hasilnya seperti tampak gambar dibawah ini :
membuat javascript di html

Pembahasan

Perintah atau fungsi console.log() akan menampilkan pesan ke dalam console javascript. Cara membuka console di browser adalah Klik kanan>Inspect Element->Console. Sedangkan perintah document.write() berfungsi untuk menulis ke dokumen HTML, maka dia akan ditampilkan kesana.

Sekarang coba saja buka console javascript, maka anda akan melihat pesan “Saya belajar Javascript”

membuat javascript di html

2. Penulisan Kode javascript Inline

Cara terakhir ini, kita akan menulis kode javascript di dalam atribut HTML. Cara ini biasanya digunakan untuk memanggil suatu fungsi pada event tertentu. Misal: saat link diklik.

Adapun Langkah-langkah Penulisan Kode javascript Inline di contohkan sebagai berikut :

  • Buka teks editor, kemudian buat file baru dengan format .html dan isi dengan kode berikut:
<a href="javascript:alert('Yey!')">Klik disini!</a>

atau bisa dengan kode dibawah ini:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World Javascript</title>
</head>
<body>
    <script>
        console.log("Saya belajar Javascript");
        document.write("Hello World!");
    </script>
    <a href="javascript:alert('Yey!')">Klik disini!</a>
</body>
</html>

Setelah itu, buka file tersebut, maka hasilnya akan terlihat seperti tampak gambar dibawah ini :

Pembahasan :

Pada contoh di atas, kita menjalankan fungsi alert() yang digunakan untuk menampilkan dialog. pada atribut href, kita juga memanggil fungsi alert() dengan didahului javascript:. Atribut href sebenarnya digunakan untuk mengisi alamat link atau URL. Karena kita ingin memanggil kode javascript di sana, maka alamat link tersebut kita ubah menjadi javascript: lalu diikuti dengan fungsi yang akan dipanggil.

3. Penulisan Kode javascript Eksternal

Pada cara ini, kita akan menulis kode javascript secara terpisah dengan file HTML. Cara ini biasanya digunakan pada project besar, karena dengan cara ini dapat lebih mudah mengelola kode project.

Adapun Langkah Penulisan Kode javascript Eksternal di contohkan sebagai berikut :

  • Langkah pertama buat dua file, yaitu: file HTML dan Javascript.
  • Tulis kode program untuk file Javascript dibawah ini :
alert("Hello, Selamat datang di praktek otodidak!");
  • Lalu save as dengan format .js ( kode-program.js)
  • Setelah itu tulis juga kode program untuk HTML dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<p>Dasar Tutorial Javascript</p>

<!-- Menyisipkan kode js eksternal -->
<script src="kode-program.js"></script>
</body>
</html>
  • Lalu save as dengan nama index.html
  • Buka file index.html tersebut, maka hasilnya akan terlihat seperti gambar dibawah ini.

Penjelasan :

Pada contoh di atas, kita menulis kode javascript terpisah dengan kode HTML. Di kode HTML, kita menyisipkannya dengan memberikan atribut src pada tag <script>. Jadi, apapun yang ada di dalam file kode-program.js akan dapat dibaca dari file index.html.

Jika file javascriptnya berada di folder yang berbeda, Kita bisa menuliskan alamat lengkap foldernya.

Contoh: Jika file kode-program.js berada di dalam direktori js. Maka untuk menyisipkan file kode-program.js ke dalam HTML, kita bisa menuliskannya seperti ini:

<script src="js/kode-program.js"></script>

Selain itu, kita dapat menyisipkan javascript yang ada di internet dengan memberikan alamat URL lengkapnya.

Contoh:

<script src="https://praktekotodidak.com/js/kode.js"></script>

Sekarang anda sudah mengenal javascript dan sudah mempraktekkan cara membuat program javascript. Begitulah tulisan saya mengenai tutorial ini, semoga mudah dipahami. Baca juga artikel selanjutnya yaitu Belajar Javascript #2 Menampilkan Output Javascript di HTML

Yuk bantu share !!!

Artikel Terkait

Tinggalkan Balasan

Scroll to Top