Cara menggunakan generator function javascript

QR Code (Quick Response Code) adalah barcode dua dimensi yang dapat menyimpan data. QR Code dapat dengan mudah kita buat dengan bantuan bahasa pemrograman CSS dan JavaScript. Lalu, bagaimana cara membuat game QR Code dengan CSS dan JavaScript? Yuk buka komputer kamu, dan ikuti beberapa langkah di bawah ini.

Cara Membuat QR Code Generator dengan JavaScript

1.  Download file plugin. Letakkan file di folder yang sama dengan index.html dan style.css.

Cara menggunakan generator function javascript

2. Buka XAMPP Control Panel, serta aktifkan Apache.

3. Buka program teks editor yang ter-install di komputer kamu, disini saya menggunakan teks editor Notepad++. Ketikkan kode HTML5 berikut ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>QR Code Generator</title>

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css" integrity="sha256-QVBN0oT74UhpCtEo4Ko+k3sNo+ykJFBBtGduw13V9vw=" crossorigin="anonymous" />
    <script src="qrcode.min.js"></script>
</head>
<body>
    <div class="cont">       
        <div class="">
            <div class="ui input">
                <input type="text" placeholder="Search...">
              </div>
            <button  class = "ui primary button" onclick="genQR()">Generate QR Code</button>
        </div>
        <div class="qrcode">
            <canvas id = "canvas">
            </canvas>
        </div>
    </div>
<script src="script.js"></script>
    
</body>
</html>

Simpan kode HTLM5 di atas di folder xampplite – htdocs – buat folder baru dengan nama QrcodeGeneration – simpan kode di atas dengan nama index.html.

4. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/QrcodeGeneration.

Cara menggunakan generator function javascript

5. Ketikkan kode CSS berikut ini.

.cont {
    display: flex;
    justify-content: space-evenly  ;
    align-items: center;
    flex-direction: column;
    top: 30px;
    height: 100vh;
}

Simpan kode CSS di folder xampplite – htdocs – buat folder baru dengan nama QrcodeGeneration– simpan code CSS dengan nama style.css.

6. Reload alamat url : http://localhost/QrcodeGeneration. Tampilan awal dari QR Code.

7. Agar aplikasi QR Code dapat digunakan, buka kembali text editor dan ketikkan kode JavaScript berikut.

function genQR(str) {
  var str = document.querySelector("input").value;
  QRCode.toCanvas(document.getElementById("canvas"), str, function(error) {
    if (error) console.error(error);
    console.log("success!");
  });
}

Simpan kode JavaScript di folder xampplite – htdocs – buat folder baru dengan nama QrcodeGeneration– simpan code JavaScript dengan nama script.js.

Membuat password generator tak begitu sulit. Asal kita paham alur dan tentu saja dengan function yang akan digunakan. Sekarang, kita akan mencoba membuat Password Generator dengan menggunakan JavaScript. Bisakah? Tentu! Kita akan mulai dengan alurnya terlebih dahulu.

Pertama kita akan mengumpulkan semua angka dan huruf (termasuk huruf biasa dan huruf kapital). Lalu, kita akan memastikan berapa banyak karakter yang akan ditampilkan setelah dicampurkan.
Sudah paham alurnya? Langsung ketikkan ini ya!




Random String
    



    
        
        
    

Jika sudah save dan lihat hasilnya. Jika kita mengklik Generate Password, maka akan keluar karakter seperti ini :

Cara menggunakan generator function javascript

Dan kita telah selesai! Mudah kan?

Keterangan :

fungsi utama dari Password Generator ini adalah Math.floor(Math.random() * campur.length) dimana kita akan menghitung berapa panjang karakter yang akan digunakan lalu setelah itu akan kita random atau acak.

Apakah kata sandimu saat ini sudah cukup sulit ditebak? Jika belum, sebaiknya segera diubah ya, minimal kata sandimu itu terdiri dari kombinasi angka, huruf, dan beberapa karakter supaya tidak mudah dijebol oleh hacker. Namun, kadangkala kita malas untuk membuat kata sandi secara otomatis. Nah, pada blog kali ini, kita akan membahas bagaimana cara membuatnya dengan menggunakan JavaScript. Bagi kamu yang belum mengenal JavaScript, silakan kenali melalui artikel Apa itu JavaScript? terlebih dahulu, ya.

Spesifikasi Proyek

Untuk memudahkan visualisasi, pada tutorial ini kita akan membuatnya dalam aplikasi website sehingga dapat diakses melalui browser. Untuk sketsanya, kira-kira akan seperti ini. 

Cara menggunakan generator function javascript

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Nah, dari sisi penggunaan aplikasinya bisa diuraikan sebagai berikut.

  1. Pengguna melihat seekbar. Seekbar tersebut bisa digulir untuk mendapatkan panjang password yang sesuai dengan kemauan pengguna.
  2. Kemudian, pengguna melihat beberapa opsi multi yang berkaitan dengan huruf sebagai penyusun password. Di sini terdapat huruf A sampai Z, a sampai z, dan angka 0 sampai 9. Opsi tersebut harus dipilih salah satu. Jika tidak dipilih, aplikasi tidak akan menghasilkan password.
  3. Lalu, pengguna akan melakukan klik terhadap tombol ‘Generate’.
  4. Aplikasi memproses password secara random sesuai dengan inputan.
  5. Aplikasi menampilkan password yang telah dibuat.

Itu adalah rincian singkat dari penggunaan aplikasinya.

Eitss! Karena dirasa akan terlalu panjang ketika kita membahas dari membuat kode untuk Visualnya (HTML), di sini kita hanya berfokus ke pembuatan script intinya menggunakan bantuan JavaScript. Jadi, di tutorial ini kita akan menggunakan proyek starter. Berikut adalah gambaran prototype yang sudah dikembangkan

Cara menggunakan generator function javascript

Persiapan

Sebelum lanjut, pastikan untuk menggunakan teks editor kesukaanmu. Salah satu contohnya adalah Visual Studio Code. Editor ini direkomendasikan karena memiliki fitur-fitur yang mendukung bagi programmer untuk mengembangkan program. 

Selain itu, kamu juga bisa menggunakan layanan editor yang tersedia secara online. Misalnya, CodeSandbox atau Replit.

Kemudian, siapkan direktori proyek kamu pada device yang digunakan. Lalu, copy dan paste kode HTML berikut pada file index.html.


See the Pen
Tutorial Password Generator by Alexzander Purwoko Widiantoro (@alexzpurewoko)
on CodePen.

Setelah selesai dibuat, kamu bisa saja langsung membuka file tersebut menggunakan Chrome sehingga hasil yang diharapkan adalah seperti berikut.

Cara menggunakan generator function javascript

Akhirnya, persiapan dari sisi file HTML yang diperlukan sudah selesai. Coba jalankan skenario dari Spesifikasi Proyek tadi untuk membuat password baru. Pasti aplikasinya masih belum berjalan karena kita belum melengkapi bagian yang penting, yakni logika dari aplikasinya. Logika merupakan aspek penting yang menentukan jalannya aplikasi.

Okay! Sambil berjalan, kita akan melengkapi bagian yang hilang itu dengan membuat kode JavaScript.

Buka IDEmu, mari ngoding bersamaku ~

Ngoding – Memuat JavaScript

Jangan lupa untuk buka editor, ya! Pada tutorial ini, kita akan menggunakan Visual Studio Code.

Buatlah sebuah file dengan nama script.js pada direktori (folder) yang sama dengan index.html seperti di bawah ini.

Cara menggunakan generator function javascript

Mengapa harus pada direktori (folder) yang sama?

Karena kita akan menjalankan kode JavaScript pada browser, file tersebut perlu dimuat pada index.html. Nah, agar browser bisa memuatnya dengan baik, akan lebih mudah ketika kita taruh pada folder yang sama. Dengan demikian, kita tidak perlu menuliskan alamat dari file tersebut secara lengkap karena dapat menimbulkan potensi masalah nantinya. 🙂

Setelah membuat file tersebut, isikan kode berikut pada script.js untuk memastikan bahwa kode berhasil dimuat!

Test Logging

1

console.log('berhasil dimuat!');


Oh iya, jangan lupa untuk melakukan import terhadap file javascript pada index.html seperti ini.

JavaScript

1

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


Pastikan letaknya berada pada bagian bawah sebelum penutup tag </body>

Cara menggunakan generator function javascript

Nah, sekarang mari kita periksa pada browser. Ingat kembali cara yang sudah ada di artikel Apa itu JavaScript? Jika kamu lupa, berikut caranya. 

  1. Buka file dengan double click.
  2. Buka Dev Tools dengan klik kanan, pilih “Inspect” -> Console

Lalu, akan muncul tampilan berikut:

Cara menggunakan generator function javascript

Yey! Akhirnya teks “berhasil dimuat!” muncul! Pada tahap ini, JavaScript telah termuat dengan sempurna oleh browser.

Jika masih menemukan kendala, yakni belum muncul, maka silakan ulangi kembali cara yang telah dijelaskan sebelumnya, ya.

Ngoding JavaScript – Fitur Kunci

Sampailah kita pada inti dari membuat aplikasi ini, yakni membuat fitur generate password. Sebelum lanjut ke inti pembahasan, pastikan untuk menghapus kode console.log ini, ya.

JavaScript

1

console.log('berhasil dimuat!');

Membuat fungsi generate password

Mari kita ingat-ingat kembali fitur generate password yang dijelaskan di dalam spesifikasi sebelumnya. Di sana terdapat 

  1. seekbar yang digunakan untuk menentukan panjang password,
  2. opsi di mana pengguna bisa menggunakan huruf kapital dari A – Z,
  3. opsi di mana pengguna bisa menggunakan huruf kecil dari a – z, dan
  4. opsi di mana pengguna bisa menggunakan nomor 0 sampai 9.

Nah, dari hal tersebut, bisa kita kumpulkan beberapa variabel yang digunakan untuk menentukan hasil dari generate password seperti berikut. 

  1. Panjang password -> passwordLength
  2. Bisa/tidak menggunakan huruf kapital dari A – Z -> useCapitalAToZ
  3. Bisa/tidak menggunakan huruf kecil dari a – z -> useLowerAToZ
  4. Bisa/tidak menggunakan nomor 0 sampai 9 -> useNumeric

Variabel tersebut akan digunakan sebagai parameter dari fungsi generatePassword() yang akan kita buat. Mari kita buat fungsinya dengan mengetikkan kode berikut pada script.js.

JavaScript

1

2

3

4

5

6

7

8

function generatePassword(

    passwordLength,

    useCapitalAToZ,

    useLowerAToZ,

    useNumeric

) {

    

}


Fungsi tersebut masih baru berwujud kerangka sehingga tidak akan menimbulkan efek atau dampak apa pun. Namun, kita perlu menyiapkan skema bagaimana fungsi tersebut melakukan aksinya. 

Untuk menyiapkan skemanya, kita perlu mengingat kembali pada spesifikasi awal dari proyek. Password akan di-generate berdasarkan nilai acak dari beberapa susunan angka dan nomor. Nilai acak tersebut akan di-generate sampai sesuai dengan panjang password yang sudah diketahui.

Sebelum mencapai hal tersebut, mari kita rancang kasus negatif terlebih dahulu.

  1. Ketika panjang password yang diinputkan < 3, ia akan mengembalikan nilai (invalid)
  2. Ketika pengguna tidak mencentang ketiga hal berikut, aplikasi akan langsung mengembalikan nilai (invalid)
    1. Opsi untuk pengguna bisa menggunakan huruf kapital dari A – Z.
    2. Opsi untuk pengguna bisa menggunakan huruf kecil dari a – z.
    3. Opsi untuk pengguna bisa menggunakan nomor 0 sampai 9.

Kemudian, dari beberapa kasus negatif tersebut kita aplikasikan pada kode di script.js. Silakan tulis kode yang dihighlight berikut.

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function generatePassword(

    passwordLength,

    useCapitalAToZ,

    useLowerAToZ,

    useNumeric

) {

    if (passwordLength < 3) {

        return '(invalid)'

    }

 

    if (!useCapitalAToZ && !useLowerAToZ && !useNumeric) {

        return '(invalid)';

    }

}


Dengan pola perancangan seperti ini, kode akan lebih aman karena beberapa kasus negatif sudah kita minimalisasi sedari awal.

Akhirnya, kasus negatif bisa diminimalisasi. Selanjutnya, pada kasus positif, kita akan memproses untuk melakukan generate password dari nilai acak yang digabung.

Dimulai dari proses melakukan generate terhadap nilai acak. Untuk melakukan hal ini, kita dapat menggunakan fungsi Math.random() yang disediakan oleh JavaScript Engine. Namun, fungsi ini menghasilkan nilai desimal yang susah diolah karena kita menggunakan bilangan bulat. Nilai desimal yang dihasilkan adalah berkisar antara 0.00 – 1.00

Cara menggunakan generator function javascript

Untuk menghasilkan bilangan bulat, diperlukan Math.floor(). Fungsi ini akan mengkonversi nilai yang ada di sebelah kiri koma saja yang menjadi bilangan bulat utuh. Misalnya seperti berikut. 

JavaScript

1

Math.floor(1.222);


Apabila kode diatas dijalankan, akan mengembalikan hasil 1.

Perlu disadari juga, kita tidak bisa langsung mengaplikasikan floor() terhadap random(). Ini akan menyebabkan nilai hasilnya akan selalu 0. Maka dari itu, sebelum mengaplikasikan floor(), perlu dikalikan terlebih dahulu dengan bilangan bulat. Misalnya seperti ini.

JavaScript

1

Math.floor(Math.random() * 10);


Ketika dijalankan, fungsi tersebut akan menghasilkan nilai 0 sampai dengan 9. Dengan demikian, dapat disimpulkan bahwa nilai 10 pada penerapan fungsi di atas digunakan untuk menciptakan angka random antara 0 – 9. Apabila kita ingin menghasilkan nilai antara 0 sampai dengan 5, kita bisa mengganti nilai 10 tersebut dengan 6. 

Maka dari itu, kita bisa menciptakan fungsi khusus yang digunakan untuk generate sebuah nilai secara acak. Kembali lagi ke file script.js, silakan tulis kode berikut setelah fungsi generatePassword().

JavaScript

1

2

3

function randomizeUntil(untilNumber) {

    return Math.floor(Math.random() * untilNumber);

}


Fungsi tersebut cukup penting mengingat kita nantinya akan sering menggunakannya. Sampai saat ini, kita sudah bisa membuat nilai acak! Yeyyy!

Nah, saatnya kembali lagi ke fungsi utama, yakni generatePassword(). Mari kita implementasikan kasus positif pada fungsi tersebut, dimulai dari kita menciptakan skenario berikut. Skenario ini terinspirasi dari spesifikasi yang telah dituliskan sebelumnya.

  1. Buat variabel dengan tipe string bernama ‘result’
  2. Acak nomor sampai dengan nomor tiga (0-2).
  3. Apabila terpilih nomor 0 dan useCapitalAToZ bernilai true,
    1. acak nomor sampai dengan nomor 26 (0 – 25),
    2. hasil acak nomor tersebut ditambah dengan 65 (karakter ASCII dari A),
    3. kemudian, hasil penjumlahan tersebut dikonversikan ke karakter, dan
    4. karakter yang sudah jadi akan di tambahkan ke result.
  4. Apabila terpilih nomor 1 dan useLowerAToZ bernilai true,
    1. Acak nomor sampai dengan nomor 26 (0 – 25),
    2. Hasil acak nomor tersebut ditambah dengan 97 (karakter ASCII dari a),
    3. Kemudian, hasil penjumlahan tersebut dikonversikan ke karakter, dan
    4. Karakter yang sudah jadi akan ditambahkan ke result.
  5. Apabila terpilih nomor 2 dan useNumeric bernilai true,
    1. Acak nomor sampai dengan nomor 10 (0 – 9),
    2. Hasil acak nomor tersebut ditambah dengan 48 (karakter ASCII dari ’0’),
    3. Kemudian, hasil penjumlahan tersebut dikonversikan ke karakter, dan
    4. Karakter yang sudah jadi akan ditambahkan ke result.
  6. Kembalikan hasil dari result.

Mari kita tulis skenario tersebut pada kode script.js. Silakan tulis kode berikut, ya.

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

function generatePassword(

    passwordLength,

    useCapitalAToZ,

    useLowerAToZ,

    useNumeric

) {

    

    let result = '';

 

    const method = randomizeUntil(3);

 

    if (method === 0 && useCapitalAToZ) {

        const randomNumber = randomizeUntil(26);

        const sumWithLetterA = 'A'.charCodeAt() + randomNumber;

        const newCharacter = String.fromCharCode(sumWithLetterA);

        result += newCharacter

    }

 

    if (method === 1 && useLowerAToZ) {

        const randomNumber = randomizeUntil(26);

        const sumWithLowerA = 'a'.charCodeAt() + randomNumber;

        const newCharacter = String.fromCharCode(sumWithLowerA);

        result += newCharacter

    }

 

    if (method === 2 && useNumeric) {

        const randomNumber = randomizeUntil(10);

        const sumWithLetterZero = '0'.charCodeAt() + randomNumber;

        const newCharacter = String.fromCharCode(sumWithLetterZero);

        result += newCharacter

    }

 

    return result;

}


Mari kita coba pada Developer Tools Console! Asumsikan pengguna ingin generate password dengan panjang 12 yang semua opsi karakternya tercentang (true). Kamu bisa taruh kode berikut pada baris terakhir dari script.js

1

console.log('password: ', generatePassword(12, true, true, true));


Lihatlah Developer Console dan amati yang terjadi. Password hanya di-generate satu huruf, padahal yang semestinya adalah 12 huruf.

Cara menggunakan generator function javascript

Ada apakah gerangan? Ini terjadi karena kita belum menggunakan perulangan terhadap skenario dari nomor 2 sampai 5. Seperti yang kita tahu, flow dari program itu berjalan dari atas ke bawah, terus seperti itu kecuali ketika ada suatu perulangan. Perulangan ini bermanfaat apabila kita ingin mengulang beberapa skenario sampai sebuah kondisi bernilai false

Cara menggunakan generator function javascript

Mengaplikasikan Perulangan pada fungsi generate password

Dalam kasus ini, kita akan mengulang skenario pengacakan huruf maupun angka tersebut sampai sejumlah dengan panjang password yang telah didefinisikan, yakni berjumlah 12. Setiap kali skenario tersebut diulang, kita akan terus menambahkan hasil pengacakan ke dalam variabel result.

Mari kita aplikasikan hal tersebut pada fungsi generatePassword() di script.js. Tuliskan kode yang dihighlight berikut ini, ya! Pastikan urutannya sesuai.

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

function generatePassword(

    passwordLength,

    useCapitalAToZ,

    useLowerAToZ,

    useNumeric

) {

    if (passwordLength < 3) {

        return '(invalid)'

    }

 

    if (!useCapitalAToZ && !useLowerAToZ && !useNumeric) {

        return '(invalid)';

    }

 

    let result = '';

 

    for (let x = 0; x < passwordLength; x++) {

        const method = randomizeUntil(3);

 

        if (method === 0 && useCapitalAToZ) {

            const randomNumber = randomizeUntil(26);

            const sumWithLetterA = 'A'.charCodeAt() + randomNumber;

            const newCharacter = String.fromCharCode(sumWithLetterA);

            result += newCharacter

        }

 

        if (method === 1 && useLowerAToZ) {

            const randomNumber = randomizeUntil(26);

            const sumWithLowerA = 'a'.charCodeAt() + randomNumber;

            const newCharacter = String.fromCharCode(sumWithLowerA);

            result += newCharacter

        }

 

        if (method === 2 && useNumeric) {

            const randomNumber = randomizeUntil(10);

            const sumWithLetterZero = '0'.charCodeAt() + randomNumber;

            const newCharacter = String.fromCharCode(sumWithLetterZero);

            result += newCharacter

        }

    }

 

    return result;

}


Kemudian jalankan dan lihat lagi pada Developer Console. Lihatlah apa yang terjadi! Panjang password sudah sesuai dengan ekspektasi kita!

Cara menggunakan generator function javascript

Namun, skema ini masih memiliki masalah ketika pengguna hanya memilih satu atau dua saja dari opsi acak huruf dan angka. Di mana panjang password yang dihasilkan masih kurang dengan nilai yang diinputkan pengguna. 

Contohnya, ketika ada pengguna yang hanya ingin melakukan generate nilai acak terhadap huruf kapital A – Z seperti ini.

JavaScript

1

console.log('password: ', generatePassword(12, true, false, false));


Berikut adalah hasilnya.

Cara menggunakan generator function javascript

Setelah ditelusuri, ini terjadi karena ketidakpastian eksekusi terhadap metode yang digunakan untuk menghasilkan nilai acak. Misalnya seperti ini. 

  • Acak method, kemudian hasil acaknya adalah 0
  • Ketika method = 0, maka seharusnya kita mengacak nilai A – Z. Namun, karena useCapitalAToZ bernilai false, ini tidak dieksekusi dan berpotensi untuk lanjut ke loop berikutnya.
  • beberapa case lain…
  • Ulangi lagi dari pengacakan method sampai perulangannya berjumlah nilai dari panjang password.

Di sini, kita bisa melihat bahwa value dari method belum bisa kita pastikan untuk menghindari logika tersebut. Sementara perulangan terus berjalan sehingga ada beberapa karakter yang tidak di-generate dan menyebabkan hasilnya menjadi kurang dari panjang password yang telah ditentukan.

Maka dari itu, diperlukan flashback terhadap nilai counter (pada perulangan) sebelumnya agar perulangan tetap berada di posisi itu saja dan menunggu hingga metodenya benar-benar dijalankan.

Mari kita aplikasikan pada kode pada fungsi generatePassword() seperti ini, lihat pada kode yang telah dihighlight, ya. 

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

function generatePassword(

    passwordLength,

    useCapitalAToZ,

    useLowerAToZ,

    useNumeric

) {

    

 

    let result = '';

 

    for(let x = 0; x < passwordLength; x++){

        const method = randomizeUntil(3);

 

        if (method === 0 && useCapitalAToZ) {

            

            continue;

        }

 

        if (method === 1 && useLowerAToZ) {

            

            continue;

        }

 

        if (method === 2 && useNumeric) {

            

            continue;

        }

 

        x--;

    }

 

    return result;

}


Jalankan lagi dan lihat hasilnya pada Developer Console. Voilla! Akhirnya berhasil!

Cara menggunakan generator function javascript

Setelah berhasil, kamu bisa menghapus log debugging yang dipasang berikut ini, ya.

JavaScript

1

console.log('password: ', generatePassword(12, true, false, false));

Ngoding JavaScript – Kaitkan dengan HTML

Fungsi yang esensial akhirnya sudah selesai, tetapi masih ada satu bagian lagi yang belum kita kerjakan, yakni mengaitkan fungsi tersebut dengan visual yang telah dibuat di HTML.

Sesuai dengan spesifikasi yang dijelaskan di awal, pada aplikasi ini terdapat 4 inputan, tombol untuk memproses, dan juga satu teks output.

Cara menggunakan generator function javascript

Di kode HTML, visualisasi inputan, tombol, teks dan sebagainya itu disebut sebagai sebuah Element. Setiap element tersebut unik dan bertanggung jawab untuk menampilkan sebuah visualisasi pada halaman web. Setiap element tertentu bisa saja mengambil sebuah masukan dari pengguna, menampilkan teks, dan sebagainya.

Nah, pada kasus sekarang, kita ingin mendapatkan masukan dari element tersebut dan juga menampilkan hasil dari generate password pada element HTML. Untuk dapat melakukan hal tersebut, kita perlu mengakses dan juga memanipulasi aksi yang ada pada element-nya. Setiap element ada identifier khusus yang dapat kita gunakan untuk mengakses objek dari element tersebut.

Untuk mengambil objek dari sebuah elemen HTML yang sudah ditampilkan dengan menggunakan identifier, kita bisa menggunakan kode berikut.

JavaScript

1

document.getElementById('generate_password');


Okay, jika kita menelisik pada kode HTML yang telah dibuat, kita dapat mencatat beberapa identifier berikut.

  1. Inputan Panjang Password -> password_length
  2. Checkbox A-Z -> capital_az_char
  3. Checkbox a-z -> small_az_char
  4. Checkbox 0-9 -> numeric
  5. Tombol Generate -> generate_password
  6. Menampilkan output text -> result_password

ID dari setiap element yang digunakan sudah dikumpulkan. Mari kita susun skenarionya, kira – kira bisa kita susun sebagai berikut :

  • Ambil Objek dari tombol Generate dengan menggunakan ID
  • Pasang listener pada objek tombol tersebut, apabila diklik, maka akan : 
    • Ambil value dari element panjang password
    • Ambil value dari checkbox A-Z
    • Ambil value dari checkbox a-z
    • Ambil value dari checkbox 0-9
    • Panggil fungsi generatePassword() lalu simpan hasilnya
    • Tampilkan hasil (password) pada output text yang disediakan.

Setelah skenario sudah disusun, mari kita aplikasikan dalam bentuk kode! Silakan ketikkan kode berikut pada script.js. Letakkan pada baris terakhir, ya.

JavaScript

1

2

3

4

5

6

7

8

9

10

11

const generatePasswordButton = document.getElementById('generate_password');

generatePasswordButton.addEventListener('click', function () {

    const passwordLength = document.getElementById('password_length').value;

    const useCapitalAToZ = document.getElementById('capital_az_char').checked;

    const useLowerAToZ = document.getElementById('small_az_char').checked;

    const useNumeric = document.getElementById('numeric').checked;

 

    const passwordResult = generatePassword(passwordLength, useCapitalAToZ, useLowerAToZ, useNumeric);

 

    document.getElementById('result_password').innerText = passwordResult;

});


Mari kita coba periksa dengan melakukan generate password dengan menggunakan visual dari aplikasi. Voilaa! Akhirnya aplikasi generate password sudah berhasil dengan baik.

Akhirnya, Password Generator sederhana yang kita buat dengan pendekatan sebuah halaman web sudah berhasil dan bisa dijalankan dengan baik. Apabila ingin melihat secara langsung kodenya, kamu bisa melihatnya pada embedded preview berikut.


See the Pen
Tutorial Password Generator – Completed! by Alexzander Purwoko Widiantoro (@alexzpurewoko)
on CodePen.
Atau, kamu juga bisa melihat source code lengkapnya pada link Github berikut ini.

Jika penasaran dengan beberapa kode yang dibuat, kami menyarankanmu untuk melihat kelas dari Dicoding seperti Belajar Dasar Pemrograman Web dan Belajar Dasar Pemrograman JavaScript. Kelas tersebut membahas tuntas mengenai pemrograman Web dan JavaScript yang ada sangkut-pautnya dengan artikel ini.

Apa itu function generator Javascript?

Pada dasarnya, function generator dapat membuat jeda eksekusi lalu dieksekusi kembali dari jeda tersebut. Function generator diibaratkan seperti play sebuah video lalu di pause, kemudian video tersebut diplay kembali dari durasi yang di pause (tidak play dari awal lagi).

Apa itu Iterable di javascript?

Protokol Iterable Protokol di Javascript adalah konvensi yang harus dipenuhi suatu objek untuk dapat memanfaatkan fitur tertentu dari bahasa pemrograman Javascript.