Teknik Informatika/Web/Rumus Kimia

Definisi masalah

Ingin menulis rumus kimia yang panjang dan melibatkan banyak sekali teks subscript. Memasukkan teks subscript satu-satu secara manual sangat menyulitkan.

Usulan solusi

Buat aplikasi web yang dapat mengubah seluruh angka pada input menjadi teks subscript secara otomatis.

Langkah Pengerjaan

Pertama, buat kerangka source code file HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
    <style>
  </head>
  <body>
  </body>
  <script>
  </script>
</html>

<!DOCTYPE html> : Digunakan agar browser beralih mode ke "mode modern web". Tanpa tag ini, browser akan menggunakan mode "legacy mode" ketika membuka halaman web kita, mengakibatkan kita tidak bisa mengakses fitur HTML5 yang terbaru.
HTMl terdiri dari dua bagian, yaitu head dan body. Head berisi informasi metadata mengenai halaman web saat ini, sedangkan body adalah isi halaman web itu sendiri.
<script> digunakan untuk menyisipkan kode program Javascript pada halaman web. Sengaja ditaruh dibawah agar halaman web selesai dibaca dan ditampilkan dulu sebelum kode Javascript dieksekusi. Masalahnya, jika file Javascript dieksekusi sebelum halaman web selesai ditampilkan, ada kemungkinan terjadinya error, karena Javascript mengakses komponen web yang belum ada.
<style> digunakan untuk menyisipkan stylesheet CSS pada web. Biasanya ditaruh di bagian head.

Buat textarea untuk menerima input dari user

<textarea id="t1" onkeyup="process()"></textarea>

Wajib diberi kode ID, agar komponen ini dapat diakses oleh Javascript
onkeyup="process()" berarti bahwa fungsi javascript process() akan dijalankan setiap kali tombol keyboard yang ditekan dan dilepas.

Buat juga text h1 untuk menampilkan teks hasil akhir (setelah semua angkanya di-subscript). Jangan lupa berikan ID agar mudah diakses Javascript.

<h1 id="res" style="text-align:center"></h1>

Saatnya memproses teks. Alur kerjanya seperti ini :

User mengetikkan sesuatu pada keyboard
Setiap kali ada karakter yang diketikkan, fungsi javascript process() akan dieksekusi.
Fungsi tersebut akan me-replace semua angka pada teks, dan mengubahnya jadi subscript.
Tampilkan teks yang sudah diproses ke text h1 pada HTML

function process(){
    // h1
    var disp = document.getElementById("res")
    
    // Isi text area
    var input = document.getElementById("t1").value
    
    // Regex untuk mencari semua angka pada string
    var regx = /([1-9]+)/g
    
    // Fungsi replace
    // Input : number
    // Output : <sub>number</sub> (ubah semua angka jadi subscript)
    function blah(x){
        var x = "<sub>" + x + "</sub>"
        return x 
    }
    
    // Potong string pada karakter  "/"
    a = input.split("/")
    
    // Potongan pertama dimasukkan ke variabel "input"
    // Potongan kedua dimasukkan ke variabel "label"
    // Jika tidak ada potongan kedua, maka variabel "label" itu kosong
    input = a[0]
    if (a[1] === undefined){
        label = ""}
    else{
        label = a[1]
    }
    
    // Ubah semua angka jadi subscript
    input = input.replaceAll(regx,blah)
    
    // Ubah =- menjadi simbol ikatan rangkap tiga
    input = input.replaceAll("=-","≡    ")
    
    // Ubah - menjadi – (lebih panjang)
    input = input.replaceAll("-","–")
    
    // Masukkan "label" zat kimia
    input = input + "<br><p>" + label +"</p>"
    
    // String ditampilkan ke h1
    disp.innerHTML = input; 
    }