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
suntingPertama, 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;
}