IT Forum

Sejak tahun 2012 hingga sekarang, JavaScript selalu menjadi bahasa pemrograman paling populer di [StackOverflow]() (sebuah situs populer tanya jawab seputar pemrograman) melalui StackOverflow Developer Survey.

Untuk membuat website, memang tidak harus menggunakan JavaScript. Namun saat ini penggunaan JavaScript hampir selalu ada di setiap web modern. Bagi programmer web, JavaScript merupakan salah satu bahasa pemrograman web yang wajib di kuasai. 

Javascript bisa membuat halaman HTML lebih interaktif dan dinamis.

Penggunaan umum untuk JavaScript adalah manipulasi gambar, validasi formulir, dan perubahan konten yang dinamis.

Untuk memilih elemen HTML, JavaScript paling sering menggunakan metode document.getElementById ().

Kali ini Inixindo punya tutorial bagaimana Javascript bekerja di HTML, salah satunya adalah bagaimana cara Javascript dapat mengubah lampu menyala dan mati dengan fungsi tombol.

Berikut ini adalah langkah-langkahnya:

  1. Persiapkan text editor seperti Notepad++, sublime, Light Table, Atom, dll sebagai media penulisan syntax.
  2. Buatlah file yang bernama lightbubble.html yang berisikan kode sebagai berikut:
  3. Pada bagian syntax <script> tambahkan kode sebagai berikut:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    function light(sw) {

      var pic;

      if (sw == 0) {

        pic = "pic_bulboff.gif"

      } else {

        pic = "pic_bulbon.gif"

      }

      document.getElementById('myImage').src = pic;

    }

    HTML <script> element digunakan untuk menulis script, atau lebih tepatnya adalah untuk menyisipkan script (JavaScript) pada sisi client. Pada bagian ini function (fungsi) untuk menyalakan dan menghidupkan objek lampu dibuat. Pada script ini menggunakan kondisi if else dimana jika variabel bernilai 0, maka elemen image lampu akan mati, jika selain 0 maka lampu akan menyala.

    Dan nantinya bagian <script> akan memiliki struktur kode sebagai berikut:

  4. Kemudian tambahkan image pada syntax html.


     

    <img id="myImage" src="/pic_bulboff.gif" width="100" height="180">

    Nantinya akan memiliki struktur kode sebagai berikut:

  5. Tambahkan element paragraph <p> pada syntax HTML sebagai berikut :


    1

    2

    3

    4

    <p>

    <button type="button" onclick="light(1)">Light On</button>

    <button type="button" onclick="light(0)">Light Off</button>

    </p>

    Pada elemen paragraph ditambahkan tipe button yang fungsinya untuk menambahkan tombol Light on dan Light off. 

    Nantinya akan memiliki struktur kode sebagai berikut :

  6. Dijelaskan bahwa kode <button type="button" onclick="light(0)">Light Off</button> jika nilai 0 maka fungsi tombol akan membuat image lampu menjadi mati. Sedangkan selain 0 yaitu 1 seperti pada kode <button type="button" onclick="light(1)">Light On</button> maka image lampu akan dibuat menyala.

  7. Klik save, Lalu buka file Lightbubble.html melalui browser (Google Chrome, Firefox, Internet Explorer)

Demikian tutorial cara membuat lampu menyala dan mati dengan javascript (make a light bulb turn on and turn off with javascript).

Javascript semoga bermanfaat, cukup mudah bukan? 

Jika ingin memperdalam lebih jauh tentang javascript Inixindo punya trainingnya loh untuk info lebih lanjut mengenai training HTML Javascript dan CSS silahkan klik https://inixindo.co.id/index.php/trainings/web-app-dev/420-html-css3-js

 

Sumber: W3schools.com

Silahkan Login untuk memberikan komentar.