5 Contoh Aplikasi Sederhana untuk Belajar Vue.js

Javascript adalah bahasa pemograman yang digunakan untuk membuat sebuah website menjadi interaktif. Misalnya ketika kita mau melakukan perubahan ketika tombol diklik, animasi, membuat game, dan masih banyak lagi.

Di Github, javascript adalah bahasa pemograman yang paling banyak dipakai. Kepopuleran ini didorong oleh banyaknya perusahaan ternama yang membuat framework javascript yang bagus, sebut saja Facebook dengan React-nya dan Google dengan Angular-nya. Dan juga semakin banyaknya tool yang mempermudah pengembangan javavscript seperti webpack dan yarn, selain karena bahasa javascript sendiri yang terus berevolusi menjadi bahasa pemograman yang matang (ES6).

Saat ini javascript tidak hanya digunakan untuk membuat aplikasi yang hidup di browser, tetapi juga bisa memuat aplikasi desktop, mobile, bahkan IoT. Semakin populer suatu bahasa pemograman, semaki banyak pekerjaan yang membutuhkannya, maka dari itu mari kita belajar javascript.

Biasanya dalam memulai belajar suatu bahasa pemograman, termasuk belajar javascript, akan lebih mudah bila kita belajar dari contoh yang sudah ada. Berikut ini ada 5 contoh aplikasi sederhana untuk belajar javascript. Contoh-contoh ini dibuat dengan murni javascript, tanpa library seperti Jquery. Di setiap contoh juga ada komentar pada baris-baris kode untuk menjelaskan kegunaan baris kode tersebut. Semoga contoh-contoh javscript ini bisa membantu kamu dalam belajar javascript.

Memulai

Yang kita butuhkan untuk membuat dan menjalankan contoh-contoh javascript di bawah ini adalah:

  1. Text editor
  2. Web browser

Saya menggunakan Visual Studio Code sebagai text editor, dan Google Chrome sebagai web browsernya. Kamu bisa menggunakan text editor lainnya, misal sublime atau atom. Untuk web browsernya kamu bisa gunakan mozilla atau safari. Omong-omong, Visual Studio Code dan Atom dibuat dengan javascript juga lho.

Jika sudah ada text editor dan web browsernya, langsung saja kita lihat contoh-contoh javascript di bawah ini.

Contoh Javascript #1: Hello, World!

Sudah seperti ritual yang wajib nih di tutorial-tutorial gitu pasti awalnya bikin kodingan yang outputnya "Hello, world!". Kita ikutin aja deh dengan tutorial lain. Tapi di contoh ini tidak hanya satu output "Hello, world!"-nya, tapi ada lima. Karena banyak cara untuk menampilkan pesan di javascript.

index.html

<div class="app"></div>

<script src="app.js"></script>

app.js

// Menggunakan alert
alert('Hello world!');

// Menggunakan console. Lihat hasilya di developer console (f12)
console.log('Hello world!')

// Pilih elemen yang sudah ada lalu isi dengan text
var $app = document.querySelector('.app');
$app.innerHTML = 'Hello world!';

// Langsung tulis teks di dalam body
document.body.appendChild(document.createTextNode('Hello world!'));

// Buat elemen baru, isi dengan teks, lalu tambahkan di dalam body
var $title = document.createElement('h1');
$title.appendChild(document.createTextNode('Hello world!'));
document.body.appendChild($title);

Demo Contoh Javascript #1: Hello World

Lima cara tersebut adalah yang pertama kita menggunakan alert yang langsung muncul ketika program berjalan.

Kedua, menggunakan console.log, yang menampilkan pesan di developer console (F12 atau klik kanan -> inspect element). Selain untuk menampilkan pesan, console.log juga bisa dipakai untuk debugging (mencari bug).

Ketiga, dengan memberikan nilai pada atribut innerHTML sebuah elemen yang sudah ada di DOM. Sebelumnya kita perlu mengambil elemen dari DOM dengan menggunakan document.querySelector.

Keempat, dengan langsung menuliskan teks di body dengan menggunakan appendChild yang berfungsi untuk menyisipkan Node ke dalam elemen, dan dengan menggunakan createTextNode yang membuat sebuah Text Node.

Terakhir, dengan membuat elemen baru dengan menggunakan document.createElement yang kemudian kita sisipkan di elemen body dengan menggunakan appendChild.

Contoh Javascript #2: Timer

Contoh berikutnya adalah timer yang menampilkan sudah berapa detik aplikasi berjalan di browser. Untuk membuat timer tersebut kita menggunakan setInterval yang akan menjalankan fungsi setiap beberapa saat.

index.html

Website ini sudah berjalan sejak <b class="timer">0</b> detik yang lalu.

<script src="app.js"></script>

app.js

var elapsed = 0;
var start = new Date();
var $timer = document.querySelector('.timer');

// Fungsi untuk menghitung jumlah detik yang sudah berlalu
function tick() {
  elapsed = new Date() - start;
  var roundedElapsed = Math.round(elapsed / 100);
  var seconds = (roundedElapsed / 10).toFixed(1);
  $timer.innerHTML = seconds;
};

// Setiap 50 milisecond, jalankan fungsi tick
setInterval(tick, 50);

Demo Contoh Javascript #2: Timer

Contoh Javascript #3: Navigation Menu

Berikutnya adalah sebuah Navigation Menu sederhana, dimana kita menyimpan menu mana yang terpilih dan menampilkannya. Contoh serupa juga ada di artikel lain dengan menggunakan Vue.js dan React .js.

index.html

<nav class="nav">
  <a href="#" class="menu is-active" data-value="Home">Home</a>
  <a href="#" class="menu" data-value="Sevices">Services</a>
  <a href="#" class="menu" data-value="About">About</a>
  <a href="#" class="menu" data-value="Contact Us">Contact Us</a>
</nav>

<div class="info">
  Anda memilih: <span class="selected">Home</span>
</div>

<script src="app.js"></script>

app.js

var selectedMenu = 'Home';
var $selected = document.querySelector('.selected');
var $menus = document.querySelectorAll('.menu');
var activeClass = 'is-active';

// https://stackoverflow.com/a/43824723/1240036
function hasClass(el, className) {
  if (el.classList)
    return el.classList.contains(className);
  return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addClass(el, className) {
  if (el.classList)
    return el.classList.add(className);
  else if (!hasClass(el, className))
    el.className += ' ' + className;
}

function removeClass(el, className) {
  if (el.classList)
    el.classList.remove(className);
  else if (hasClass(el, className)) {
    var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
    el.className = el.className.replace(reg, ' ');
  }
}

// Fungsi untuk set element jadi aktif dengan menambah class is-active bila elemen
// memiliki data-value yang sama, dan menghilangkan class is-active bila data-value nya tidak sama
function toggleActive(els, elSelected) {
  els.forEach(function(el) {
    if (el.dataset.value === elSelected.dataset.value) {
      addClass(el, activeClass);
      $selected.innerHTML = elSelected.dataset.value;
    } else {
      removeClass(el, activeClass);
    }
  })
}

$menus.forEach(function($menu) {

  // Tambah listener untuk event klik, yaitu toggleActive.
  $menu.addEventListener('click', toggleActive.bind(this, $menus, $menu));
});

Demo Contoh Javascript #3: Navigation Menu

Untuk mengubah tampilan dari menu yang sedang dipilih, kita perlu mengubah class dari menu navigasi yang terpilih tersebut. Makanya kita menggunakan tiga buah fungsi yang berguna untuk mengubah class dari sebuah elemen.

Yang pertama hasClass, yang mengembalikan nilai true atau false, berfungsi untuk memeriksa apakah suatu elemen memiliki sebuah class atau tidak.

Kemudian yang kedua ada fungsi addClass, sesuai namanya yaitu untuk menambahkan sebuah class pada elemen. Di dalamnya menggunakan fungsi hasClass juga, supaya tidak menambahkan class apabila class tersebut sudah dimiliki oleh elemen.

Yang ketiga, fungsi removeClass, untuk membuang sebuah class pada elemen. Fungsi ini juga menggunakan fungsi hasClass, sehingga hanya melakukan operasi penghapusan class, hanya apabila class tersebut ada pada elemen.

Kemudian ada fungsi toggleActive, yang akan kita panggil ketika menu di klik. Nah, supaya toggleActive dijalankan saat klik, kita perlu mendaftarkannya dengan menggunakan addEventListener.

Contoh Javascript #4: Login Validation

Contoh berikutnya sangat sederhana, kita hanya menampilkan pesan jika email dan password yang dimasukkan tidak sesuai dan menampilkan alert jika sesuai. Untuk kasus di dunia nyata, validasi dilakukan di server dengan menggunakan ajax.

index.html

<div class="container">
  <form action="" class="form">
    <div class="error" style="display: none"></div>

    <div class="input-field">
      <label for="email">Email</label>
      <input type="text" id="email" />
    </div>

    <div class="input-field">
      <label for="password">Password</label>
      <input type="password" id="password" />
    </div>

    <input type="submit" value="Login">
  </form>
</div>

app.js

var $form = document.querySelector('.form');
var $error = document.querySelector('.error');
var $inputFields = document.querySelectorAll('.input-field');
var $email = document.getElementById('email');
var $password = document.getElementById('password');

function addError(message) {
  $error.innerHTML = message;
  $error.style.display = 'block';
}

function removeError() {
  $error.innerHTML = '';
  $error.style.display = 'hidden';
}

function validate(event) {
  // event.preventDefault() untuk tidak menjalankan fungsi form apabila di submit, yaitu mengirim data ke 'action'.
  event.preventDefault();
  $error.style.display = 'none';

  if ($email.value !== 'admin@example.com' || $password.value !== 'password') {
    addError('Email atau password salah');
  } else {
    removeError();
    alert('Anda Berhasil Login!');
  }
}

$form.addEventListener('submit', validate);

Demo Contoh Javascript #4: Login Validation

Contoh ini sangat sederhana. Kita hanya menggunakan $error.style.display untuk membuat elemen error tempil atau sembunyi. Dengan memberi nilai block dan hidden.

Kemudian mengganti isi text $error tersebut dengan mengguankan innerHTML.

Contoh Javascript #5: Order Form

Berikutnya adalah contoh yang sedikit tidak sederhana, karena ada beberapa elemen dan beberapa operasi. Kita membuat aplikasi untuk menampilkan daftar menu yang bisa dipilih dan kemudian menampilkan jumlah biaya yang harus dibayarkan.

index.html

<div class="app"></div>

<script src="helper.js"></script>
<script src="app.js"></script>

helper.js

// https://stackoverflow.com/a/43824723/1240036
function hasClass(el, className) {
  if (el.classList)
    return el.classList.contains(className);
  return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addClass(el, className) {
  if (el.classList)
    return el.classList.add(className);
  else if (!hasClass(el, className))
    el.className += ' ' + className;
}

function removeClass(el, className) {
  if (el.classList)
    el.classList.remove(className);
  else if (hasClass(el, className)) {
    var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
    el.className = el.className.replace(reg, ' ');
  }
}

function currency(amount) {
  return 'Rp ' + amount;
}

app.js

var products = [
  {
    id: 1,
    name: 'Cappucino',
    price: 35000,
    active: true,
  },
  {
    id: 2,
    name: 'Green Tea Latte',
    price: 40000,
    active: true
  },
  {
    id: 3,
    name: 'Fish and Chips',
    price: 50000,
    active: true,
  },
  {
    id: 4,
    name: 'Tuna Sandwich',
    price: 45000,
    active: true,
  },
  {
    id: 5,
    name: 'Mineral Water',
    price: 8000,
    active: false,
  },
  {
    id: 6,
    name: 'French Fries',
    price: 18000,
    active: false,
  },
];

var total = 0;
var $app = document.querySelector('.app');

// Render title
function renderTitle(container) {
  var $title = document.createElement('h1');
  $title.innerHTML = 'Pesanan';
  container.appendChild($title);
}

function addTotal(product, total, isAdd) {
  if (isAdd) {
    total += product.price;
  } else {
    total -= product.price;
  }
  return total;
}

// Render list
function renderList(container, products) {
  var $orderList = document.createElement('ul');

  // Loop products, buat elemen tiap produk lalu append ke orderList
  products.forEach(function(product) {
    var $product = document.createElement('li');
    var $productPrice = document.createElement('span');

    $productPrice.innerHTML = currency(product.price);
    $product.innerHTML = product.name;
    $product.appendChild($productPrice);

    $orderList.appendChild($product);

    // Tambah event handler ketika produk di klik
    $product.addEventListener('click', function(event) {

      // isAdd untuk menentukan apakah operasi berikutnya adalah
      // operasi penambahan atau pengurangan
      var isAdd = !hasClass($product, 'is-active');

      // Kita tambah atau buang class is-active sesuai operasi yang
      // akan dilakukan
      if (isAdd) {
        addClass($product, 'is-active');
      } else {
        removeClass($product, 'is-active');
      }

      // Mendapatkan nilai total yang baru dari fungsi addTotal
      total = addTotal(product, total, isAdd);

      // Perbarui nilai total di DOM
      var $total = document.querySelector('.total span');
      $total.innerHTML = currency(total);
    });
  });

  container.appendChild($orderList);
}

// Render Total
function renderTotalContainer(container, total) {
  var $totalContainer = document.createElement('div');
  addClass($totalContainer, 'total');

  $totalContainer.innerHTML = 'Total: ';

  var $total = document.createElement('span');
  $total.innerHTML = currency(total);
  $totalContainer.appendChild($total);

  container.appendChild($totalContainer);
}

// Render title, list, dan totalContainer
renderTitle($app);
renderList($app, products);
renderTotalContainer($app, total);

// querySelectorAll untuk mendapat semua DOM Node yang sesuai dengan selector
// yang diberikan. Kemudian kita bisa menggunaka loop (forEach) untuk mendapat
// setiap DOM Node nya.
var $products = document.querySelectorAll('li');
$products.forEach(function($product, index) {

  // Kita pilih 2 order teratas dengan men-trigger event click
  if (index < 2) {
    $product.dispatchEvent(new Event('click'));
  }
});

Demo Contoh Javascript #5: Order Form

Disini kita pakai tiga fungsi untuk operasi class seperti pada contoh kedua, yaitu hasClass, addClass, dan removeClass. Bedanya, disini kita pindah di file lain yaitu helpers.js, supaya lebih enak dibaca. Juga di tambahkan pada file ini fungsi currency, gunanya sederhana, yaitu hanya menambahkan 'Rp' di depan jumlah biaya.

Ada fungsi baru yang dipakai pada contoh ini, yaitu dispatchEvent. dispatchEvent ini berguna untuk men-trigger satu eventListener pada suatu elemen yang dalam contoh diatas adalah 'click'. Sehingga dua item teratas terpilih.

Kesimpulan

Belajar javascript itu gampang selama kita punya kemauan. Secara umum operasi yang dilakukan pada sebuah aplikasi javascript adalah:

  1. Seleksi elemen di DOM
  2. Manipulasi DOM (mengubah atribut elemen seperti class)
  3. Membuat elemen
  4. Menambah eventListener pada elemen sehingga interaktif

Tentunya masih banyak lagi yang perlu kita pelajari tentang javascript. Beberapa link yang bermanfaat untuk belajar javascript diantaranya: