Caesar Cipher di JavaScript - Panduan Langkah demi Langkah

iklan

Tentang Tutorial Ini

JavaScript adalah bahasa yang ideal untuk membuat alat enkripsi interaktif yang berjalan langsung di browser. Tutorial komprehensif ini memandu Anda mengimplementasikan Caesar cipher di JavaScript, dari fungsi dasar hingga aplikasi web interaktif dengan manipulasi DOM. Baik Anda membuat alat edukatif atau mempelajari konsep kriptografi, panduan ini mencakup semua yang Anda butuhkan. Sebelum terjun ke kode, tinjau Panduan Caesar Cipher untuk Pemula kami untuk memahami fundamental enkripsi.

Memahami Dasar-Dasarnya

Caesar cipher menggeser setiap huruf dalam teks asli sebanyak sejumlah posisi tetap dalam alfabet. Di JavaScript, kita akan menggunakan metode kode karakter dan aritmatika modular untuk mengimplementasikan ini secara efisien baik untuk lingkungan browser maupun Node.js.

Contoh:

Dengan pergeseran 3, "HELLO" menjadi "KHOOR"

Implementasi Dasar JavaScript

Mari kita mulai dengan fungsi enkripsi sederhana yang mendemonstrasikan konsep inti: 

function caesarEncrypt(text, shift) {
    /**
     * Encrypts text using Caesar cipher with given shift value.
     *
     * @param {string} text - Text to encrypt
     * @param {number} shift - Number of positions to shift (1-25)
     * @returns {string} Encrypted text
     */
    let result = '';

    for (let i = 0; i < text.length; i++) {
        let char = text[i];

        // Check if character is uppercase letter
        if (char >= 'A' && char <= 'Z') {
            // Shift within uppercase letters (A-Z)
            let code = text.charCodeAt(i);
            char = String.fromCharCode(((code - 65 + shift) % 26) + 65);
        }
        // Check if character is lowercase letter
        else if (char >= 'a' && char <= 'z') {
            // Shift within lowercase letters (a-z)
            let code = text.charCodeAt(i);
            char = String.fromCharCode(((code - 97 + shift) % 26) + 97);
        }
        // Keep non-alphabetic characters unchanged

        result += char;
    }

    return result;
}

// Example usage
const plaintext = "Hello World!";
const shift = 3;
const encrypted = caesarEncrypt(plaintext, shift);
console.log(`Original: ${plaintext}`);
console.log(`Encrypted: ${encrypted}`);

// Output:
// Original: Hello World!
// Encrypted: Khoor Zruog!

Cara Kerja Implementasi JavaScript

Memahami metode JavaScript kunci yang digunakan dalam Caesar cipher:

Metode charCodeAt()

Mengembalikan nilai Unicode dari karakter. Untuk 'A', 'A'.charCodeAt(0) mengembalikan 65. Ini penting untuk mengkonversi huruf menjadi angka.

String.fromCharCode()

Mengkonversi nilai Unicode kembali ke karakter. String.fromCharCode(65) mengembalikan 'A'. Digunakan untuk membangun kembali string terenkripsi.

Aritmatika Modulo (% 26)

Operator modulo membungkus huruf di sekitar alfabet. Ketika 'Z' + 1 melebihi alfabet, kembali ke 'A'. Krusial untuk mempertahankan batas alfabet.

Metode Array

split(), map(), dan join() memungkinkan gaya pemrograman fungsional, membuat kode lebih mudah dibaca dan dipelihara.

Implementasi Modern ES6+

Menggunakan fitur JavaScript modern untuk kode yang lebih bersih dan fungsional: 

const caesarCipher = (text, shift) => {
    /**
     * Modern ES6+ Caesar cipher implementation
     */
    const encrypt = (char) => {
        if (!/[a-zA-Z]/.test(char)) return char;

        const base = char === char.toUpperCase() ? 65 : 97;
        return String.fromCharCode(
            ((char.charCodeAt(0) - base + shift) % 26) + base
        );
    };

    return text.split('').map(encrypt).join('');
};

const decrypt = (text, shift) => caesarCipher(text, -shift);

// Example usage with arrow functions
const message = "JavaScript is powerful!";
const encrypted = caesarCipher(message, 7);
const decrypted = decrypt(encrypted, 7);

console.log(`Original: ${message}`);
console.log(`Encrypted: ${encrypted}`);
console.log(`Decrypted: ${decrypted}`);

Integrasi Browser dengan DOM

Buat alat Caesar cipher interaktif yang dapat digunakan pengguna langsung di browser mereka. Berikut contoh lengkap dengan HTML dan JavaScript: 

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tool Caesar Cipher</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
        }
        .input-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background: #4f46e5;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background: #4338ca;
        }
        #result {
            margin-top: 20px;
            padding: 15px;
            background: #f3f4f6;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>Tool Caesar Cipher</h1>

    <div class="input-group">
        <label for="text">Masukkan Teks:</label>
        <textarea id="text" rows="4" placeholder="Ketik pesan Anda di sini..."></textarea>
    </div>

    <div class="input-group">
        <label for="shift">Nilai Pergeseran (1-25):</label>
        <input type="number" id="shift" min="1" max="25" value="3">
    </div>

    <button onclick="encrypt()">Enkripsi</button>
    <button onclick="decrypt()">Dekripsi</button>

    <div id="result"></div>

    <script src="caesar.js"></script>
</body>
</html>
// caesar.js - DOM manipulation for Caesar cipher tool

function caesarTransform(text, shift) {
    return text.split('').map(char => {
        if (char >= 'A' && char <= 'Z') {
            return String.fromCharCode(((char.charCodeAt(0) - 65 + shift) % 26) + 65);
        }
        if (char >= 'a' && char <= 'z') {
            return String.fromCharCode(((char.charCodeAt(0) - 97 + shift) % 26) + 97);
        }
        return char;
    }).join('');
}

function encrypt() {
    const text = document.getElementById('text').value;
    const shift = parseInt(document.getElementById('shift').value);

    if (!text) {
        alert('Silakan masukkan teks untuk dienkripsi');
        return;
    }

    const result = caesarTransform(text, shift);
    displayResult('Terenkripsi', result);
}

function decrypt() {
    const text = document.getElementById('text').value;
    const shift = parseInt(document.getElementById('shift').value);

    if (!text) {
        alert('Silakan masukkan teks untuk didekripsi');
        return;
    }

    const result = caesarTransform(text, -shift);
    displayResult('Terdekripsi', result);
}

function displayResult(operation, text) {
    const resultDiv = document.getElementById('result');
    resultDiv.innerHTML = `
        <h3>Hasil ${operation}:</h3>
        <p><strong>${text}</strong></p>
        <button onclick="copyToClipboard('${text.replace(/'/g, "\\'")}')" style="margin-top: 10px;">
            Salin ke Clipboard
        </button>
    `;
}

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        alert('Disalin ke clipboard!');
    }).catch(err => {
        console.error('Gagal menyalin:', err);
    });
}

Implementasi Lanjutan Berbasis Class

Untuk aplikasi production, pendekatan berbasis class memberikan organisasi dan reusabilitas yang lebih baik: 

class CaesarCipher {
    /**
     * Comprehensive Caesar cipher implementation with advanced features
     */

    constructor(shift = 3) {
        this.shift = ((shift % 26) + 26) % 26; // Handle negative shifts
    }

    encrypt(text) {
        return this.transform(text, this.shift);
    }

    decrypt(text) {
        return this.transform(text, -this.shift);
    }

    transform(text, shift) {
        return text.split('').map(char => {
            if (!/[a-zA-Z]/.test(char)) return char;

            const base = char === char.toUpperCase() ? 65 : 97;
            return String.fromCharCode(
                ((char.charCodeAt(0) - base + shift + 26) % 26) + base
            );
        }).join('');
    }

    bruteForce(encryptedText) {
        /**
         * Try all possible shifts to decrypt text
         * Useful when the shift is unknown
         *
         * @param {string} encryptedText - Text to decrypt
         * @returns {Array} All 26 possible decryptions
         */
        const results = [];
        for (let shift = 0; shift < 26; shift++) {
            results.push({
                shift,
                text: this.transform(encryptedText, -shift)
            });
        }
        return results;
    }

    setShift(newShift) {
        this.shift = ((newShift % 26) + 26) % 26;
        return this;
    }

    static rot13(text) {
        // ROT13 is Caesar cipher with shift of 13
        return new CaesarCipher(13).encrypt(text);
    }
}

// Example usage
const cipher = new CaesarCipher(5);

// Encryption
const message = "JavaScript sangat powerful!";
const encrypted = cipher.encrypt(message);
console.log(`Original: ${message}`);
console.log(`Encrypted: ${encrypted}`);

// Decryption
const decrypted = cipher.decrypt(encrypted);
console.log(`Decrypted: ${decrypted}`);

// Brute force attack
const mysteryText = "Mjqqt Btwqi";
console.log("\nHasil brute force:");
cipher.bruteForce(mysteryText).slice(0, 5).forEach(result => {
    console.log(`Shift ${result.shift}: ${result.text}`);
});

// ROT13
const rot13Text = CaesarCipher.rot13("Hello World");
console.log(`\nROT13: ${rot13Text}`);

Praktik Terbaik JavaScript

Implementasi kami mengikuti standar JavaScript modern dan praktik terbaik:

  • Komentar JSDoc: Dokumentasi yang jelas menjelaskan parameter, tipe return, dan tujuan fungsi
  • Fitur ES6+: Arrow function, template literal, dan const/let untuk sintaks modern
  • Validasi Input: Memeriksa string kosong dan memvalidasi nilai pergeseran
  • Pendekatan Fungsional: Fungsi murni tanpa efek samping untuk testabilitas yang lebih baik
  • Prinsip DRY: Metode transform yang dapat digunakan kembali menghilangkan duplikasi kode
  • Enkapsulasi Class: Desain berorientasi objek untuk fungsionalitas terkait

Kesalahan Umum yang Harus Dihindari

Waspadai kesalahan umum ini saat mengimplementasikan Caesar cipher di JavaScript:

  • Lupa Modulo: Tanpa % 26, kode karakter bisa melebihi rentang yang valid
  • Pergeseran Negatif: Tambahkan 26 sebelum modulo untuk menangani nilai negatif dengan benar
  • Sensitivitas Huruf Besar/Kecil: Tangani huruf besar dan kecil dengan nilai basis yang berbeda
  • Karakter Non-Huruf: Pertahankan spasi, tanda baca, dan angka tanpa perubahan
  • Konversi Tipe: Pastikan nilai pergeseran dikonversi ke angka dengan parseInt()

Menggunakan Caesar Cipher di Node.js

Implementasi yang sama bekerja dengan sempurna di Node.js untuk enkripsi sisi server, alat command-line, atau pemrosesan file: 

// Node.js Caesar cipher implementation
// Save as caesar-cli.js

const readline = require('readline');

class CaesarCipher {
    constructor(shift = 3) {
        this.shift = ((shift % 26) + 26) % 26;
    }

    encrypt(text) {
        return this.transform(text, this.shift);
    }

    decrypt(text) {
        return this.transform(text, -this.shift);
    }

    transform(text, shift) {
        return text.split('').map(char => {
            if (!/[a-zA-Z]/.test(char)) return char;
            const base = char === char.toUpperCase() ? 65 : 97;
            return String.fromCharCode(
                ((char.charCodeAt(0) - base + shift + 26) % 26) + base
            );
        }).join('');
    }
}

// Command-line interface
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

console.log('=== Caesar Cipher CLI ===\n');

rl.question('Masukkan teks: ', (text) => {
    rl.question('Masukkan nilai pergeseran: ', (shift) => {
        rl.question('Enkripsi atau Dekripsi? (e/d): ', (operation) => {
            const cipher = new CaesarCipher(parseInt(shift));
            const result = operation.toLowerCase() === 'e'
                ? cipher.encrypt(text)
                : cipher.decrypt(text);

            console.log(`\nHasil: ${result}\n`);
            rl.close();
        });
    });
});

// Export for use as module
module.exports = CaesarCipher;

Kasus Penggunaan Praktis

Implementasi Caesar cipher JavaScript sangat cocok untuk:

Alat edukatif interaktif dan demonstrasi
Platform pembelajaran kriptografi berbasis browser
Obfuscation pesan sederhana di aplikasi web
Solusi coding challenge dan latihan interview
Membangun fondasi untuk sistem enkripsi yang lebih kompleks
Membuat game puzzle dan alat escape room

Pertimbangan Performa

Implementasi memiliki kompleksitas waktu O(n) di mana n adalah panjang teks. Untuk performa optimal:

  • Gunakan map() dan join() daripada konkatenasi string dalam loop
  • Prakompilasi ekspresi reguler di luar fungsi ketika digunakan berulang kali
  • Pertimbangkan API TextEncoder/TextDecoder untuk pemrosesan teks besar
  • Gunakan Web Workers untuk mengenkripsi file besar tanpa memblokir UI
  • Cache alfabet terenkripsi saat memproses banyak pesan dengan pergeseran yang sama

Menguji Implementasi Anda

Test case komprehensif untuk memverifikasi Caesar cipher Anda bekerja dengan benar: 

// Test suite for Caesar cipher (using Jest or similar)

describe('Caesar Cipher Tests', () => {
    const cipher = new CaesarCipher(3);

    test('encrypts basic text correctly', () => {
        expect(cipher.encrypt('ABC')).toBe('DEF');
    });

    test('handles wrap around from Z to A', () => {
        expect(cipher.encrypt('XYZ')).toBe('ABC');
    });

    test('preserves case', () => {
        expect(cipher.encrypt('Hello')).toBe('Khoor');
    });

    test('keeps non-alphabetic characters unchanged', () => {
        expect(cipher.encrypt('Hello, World!')).toBe('Khoor, Zruog!');
    });

    test('encryption and decryption are reversible', () => {
        const original = 'JavaScript Programming';
        const encrypted = cipher.encrypt(original);
        const decrypted = cipher.decrypt(encrypted);
        expect(decrypted).toBe(original);
    });

    test('handles shift of 0', () => {
        const cipher0 = new CaesarCipher(0);
        expect(cipher0.encrypt('Test')).toBe('Test');
    });

    test('handles negative shifts', () => {
        const cipherNeg = new CaesarCipher(-3);
        expect(cipherNeg.encrypt('DEF')).toBe('ABC');
    });

    test('handles shifts greater than 26', () => {
        const cipher29 = new CaesarCipher(29);
        expect(cipher29.encrypt('ABC')).toBe('DEF'); // 29 % 26 = 3
    });

    test('ROT13 is self-inverse', () => {
        const text = 'Hello World';
        const rot13Once = CaesarCipher.rot13(text);
        const rot13Twice = CaesarCipher.rot13(rot13Once);
        expect(rot13Twice).toBe(text);
    });
});

console.log('All tests passed!');

Ide Pengembangan

Kembangkan implementasi ini dengan fitur tambahan:

Tambahkan visualisasi analisis frekuensi dengan Chart.js
Implementasikan deteksi bahasa otomatis
Buat wrapper komponen React atau Vue
Tambahkan localStorage untuk menyimpan riwayat enkripsi
Bangun ekstensi browser untuk mengenkripsi konten web
Integrasikan dengan Clipboard API untuk copy/paste yang mudah
Tambahkan dukungan untuk alfabet kustom dan Unicode
Buat visualisasi enkripsi yang animasi

Sumber Terkait

Lanjutkan perjalanan belajar kriptografi dan JavaScript Anda:

Ringkasan

Anda telah mempelajari cara mengimplementasikan Caesar cipher di JavaScript dari fungsi dasar hingga aplikasi web interaktif. Kita telah membahas implementasi klasik, sintaks modern ES6+, manipulasi DOM, desain berbasis class, dan penggunaan Node.js. Pengetahuan ini membentuk fondasi untuk membangun alat enkripsi yang lebih canggih dan memahami kriptografi berbasis web.

Praktikkan dengan membuat alat cipher interaktif Anda sendiri, bereksperimen dengan berbagai framework UI, atau gabungkan Caesar cipher dengan teknik enkripsi lain. Meskipun Caesar cipher tidak cocok untuk mengamankan data sensitif, ia memberikan pengenalan yang sangat baik terhadap konsep kriptografi dan manipulasi string JavaScript untuk web developer.