Sambil menunggu waktu aktif mengajar, menyempatkan belajar kode kecil-kecilan, agar menulis di Editor Blogger semakin mudah. Kali ini membuat markdown atau penyandian elektron dalam orbital dengan menuliskan kode sederhana (input) dan output-nya berupa deretan "kotak orbital" yang berisi elektron.
Penampilan sementara masih di file html tunggal yang berisi kode Cascading Style Sheet dan JavaScript. Bagi yang mau mencoba menjalankan silakan salin kode di bawah ini, simpan sebagai file html. Selanjutnya buka di browser komputer.
Tampilannya di browser akan seperti gambar di bawah ini.
Jika ingin menerapkan dalam Blogger silakan untuk menyesuaikan dengan Tema Blogger. Untuk penggunan non-blogger silakan adaptasi sendiri.
Silakan salin dan simpan sebagai file html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elektron dalam Orbital Formatter</title>
<style>
.orbital-formula {
font-family: Arial, sans-serif;
color: blue;
display: inline-block;
margin: 0 10px 0 5px; /* Jarak kanan lebih lebar untuk antisipasi */
}
.orbital-box {
display: inline-block;
border: 1px solid black;
padding: 0px 1px 2px 1px;
min-width: 14px;
text-align: center;
margin-right: -1px;
}
.orbital-group {
display: inline-block;
margin-right: 8px;
}
.orbital-group .orbital-box:last-child {
margin-right: 0px;
}
</style>
</head>
<body>
<p>Contoh 1: |1s`2|</p>
<p>Contoh 2: |1s`1:up|</p>
<p>Contoh 3: |1s`1:down|</p>
<p>Contoh 4: |1s`1|</p>
<p>Contoh 5: |2p`2| dan |2p`1:down|</p>
<p>Contoh 6: |1s`2 2s`2 2p`4|</p>
<p>Contoh 7: |1s`2 2s`2 2p`4 3d`4 4f`4|</p>
<script type='text/javascript'>
const OrbitalFormatter = {
processOrbital: function(text) {
let result = text;
// Ganti pola dari \{|...|\} menjadi |...|
result = result.replace(/\|([^|]+)\|(\s*)/g, function(match, content, whitespace) {
const orbitals = content.trim().split(/\s+/);
let formattedGroups = [];
// Hanya proses notasi yang mengandung tanda `
if (!content.includes('`')) {
return match; // Kembalikan apa adanya jika tidak ada tanda `
}
orbitals.forEach(orbitalConfig => {
const parts = orbitalConfig.split(':');
const orbitalPart = parts[0];
const arrowDirection = parts[1] || 'up';
// Pola untuk mencari tanda `
const orbitalMatch = orbitalPart.match(/([0-9][spdf])(?:`([0-9]))?/);
if (!orbitalMatch) {
formattedGroups.push(orbitalPart);
return;
}
const orbital = orbitalMatch[1];
const electronCount = orbitalMatch[2] ? parseInt(orbitalMatch[2]) : 1;
let subOrbitals = 1;
if (orbital.includes('p')) subOrbitals = 3;
else if (orbital.includes('d')) subOrbitals = 5;
else if (orbital.includes('f')) subOrbitals = 7;
let subOrbitalArrows = [];
if (electronCount <= subOrbitals) {
for (let i = 0; i < electronCount; i++) {
subOrbitalArrows.push(arrowDirection.toLowerCase() === 'down' ? '↓' : '↑');
}
for (let i = electronCount; i < subOrbitals; i++) {
subOrbitalArrows.push('');
}
} else {
let remainingElectrons = electronCount;
let firstPass = Math.min(subOrbitals, remainingElectrons);
for (let i = 0; i < firstPass; i++) {
subOrbitalArrows.push(arrowDirection.toLowerCase() === 'down' ? '↓' : '↑');
remainingElectrons--;
}
for (let i = 0; i < subOrbitals && remainingElectrons > 0; i++) {
if (subOrbitalArrows[i]) {
subOrbitalArrows[i] = '↑↓';
remainingElectrons--;
}
}
for (let i = subOrbitalArrows.length; i < subOrbitals; i++) {
subOrbitalArrows.push('');
}
}
let formattedSubOrbitals = subOrbitalArrows.map(arrow => {
return `<span class="orbital-box">${arrow || ' '}</span>`;
});
formattedGroups.push(`<span class="orbital-group">${formattedSubOrbitals.join('')}</span>`);
});
let formattedResult = `<span class="orbital-formula">${formattedGroups.join('')}</span>`;
if (whitespace.length === 0 || /\S/.test(text.slice(match.length))) {
formattedResult = `<span class="orbital-formula" style="margin-right: 0px;">${formattedGroups.join('')}</span>`;
}
return formattedResult;
});
return result;
},
processElement: function(element) {
const self = this;
function processNode(node) {
if (node.nodeType === 3) {
let text = node.textContent;
let formattedText = text;
if (formattedText.includes("|")) {
formattedText = self.processOrbital(formattedText);
}
let finalDiv = document.createElement("div");
finalDiv.innerHTML = formattedText;
while (finalDiv.firstChild) node.parentNode.insertBefore(finalDiv.firstChild, node);
node.parentNode.removeChild(node);
} else {
Array.from(node.childNodes).forEach(processNode);
}
}
processNode(element);
},
init: function() {
const self = this;
setTimeout(function() {
document.querySelectorAll("p, li, div, span, h1, h2, h3, h4, h5, h6").forEach(function(element) {
self.processElement(element);
});
}, 1000);
}
};
document.addEventListener("DOMContentLoaded", function() {
OrbitalFormatter.init();
});
</script>
</body>
</html>
Contoh hasil penerapan di blog urip.info
Contoh 1: |1s!2|
Contoh 2: |1s!1:up|
Contoh 3: |1s!1:down|
Contoh 4: |1s!1|
Contoh 5: |2p!2| dan |2p!1:down|
Contoh 6: |1s!2 2s!2 2p!4|
Contoh 7: |1s!2 2s!2 2p!4 3d!4 4f!4|
Pengisian posisi tertentu dan arah tertentu:
Contoh 8: |3p![0,1,0]|
Contoh 9: |3d![0,0,1:down,0,1]|
Contoh 10: |3p![2,0,0]|
Selamat mencoba.
Tidak ada komentar:
Posting Komentar