Belajar Perintah Javascript Pengacak Heksa Warna

Belajar Perintah Javascript Pengacak Heksa Warna - Belajar memahami serta penggunaan perintah javascript tidak semudah saat membentuk sebuah efek dengan kode perintah CSS, karena kode yang terdapat pada javascript mempunyai hubungan yang erat dengan kode perintah lainnya. Kesempatan kali ini saya mengajak sahabat semua untuk saling berbagi dalam pemahaman perintah javascript pengacak heksa warna pada jalur tabel heksa warna berikut ini:

Kode yang sama pernah saya bagikan kepada semua sahabat pecinta SAHABAT BLOGGER 77 tentang Tombol Pengganti Warna Background Buat Pengunjung, untuk pembahasan kali ini saya akan coba gabungkan keseluruhan kode heksa warna diatas dalam perintah javascript, sehingga pergantian warna akan secara otomatis pekerjaannya diambil alih oleh javascript. (mengambil warna acak dari array 'color')

(id ('#')) HEKSA WARNA
Kode heksa Warna Acak dengan format bahasa c-data dalam perintah javascript yang susunannya seperti berikut

"#"+((1<<24)*Math.random()|0).toString(16);

URUTAN DAFTAR WARNA
Menggabungkan warna dan mendapatkannya secara acak berdasarkan barisan warna yang sudah tersusun dan terdaftar, kemudian memasukkan hasil warna acak tersebut dalam deretan variabel seperti ini :

// Urutan daftar warna
var colors = ["#345", "#292222", "#990000", "black", "#ffa500", "#fff3db", "#080", "#660000"];
// sorot hasilnya ke dalam variabel `a`
var a = colors[Math.floor(Math.random()*colors.length)];

SELEKSI ALTERNATIF PENGGUNAAN
Hasil deretan kode variabel berikut ini sedikit diperbaharui, namun jika Anda bandingkan dengan perintah yang pertama, script berikut ini akan lebih dapat menghasilkan deretan warna acak yang lebih indah, karena javascript pada perintah yang pertama masih menggenerasikan lima digit kode saja, padahal validitas warna yang seharusnya pada kode heksa terdiri dari enam digit, scriptnya sebagai berikut:

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split(''),
        color = '#';
    for (var i = 0; i < 6; ++i) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

Perintah yang satu ini sangat mengagumkan, Anda boleh coba gunakan script ini, maka Anda akan benar-benar mendapatkan pembangkit warna yang benar-benar acak dan nyaman

var Color = '#';
var myElement;
for (var i = 0; i < 6; i++) {
    function Random1(from, to) {
      return Math.floor((Math.random() * (70 - 65 + 1)) + 65);
}
    function Random2(from, to) {
      return Math.floor((Math.random() * (1 - 0 + 1)) + 0);
}
    function Random3(from, to) {
      return Math.floor((Math.random() * (9 - 0 + 1)) + 0);
}
if (Random2()) {
     myElement = Random3();
}
else {
     myElement = String.fromCharCode(Random1());
}
Color += myElement;
}

TAHAP AKHIR PENGGUNAAN
Kita ambil salah satu contoh penerapan fungsi perintah diatas dengan membuat warna background pada setiap halaman body dengan warna yang selalu berganti secara otomatis pada setiap 1 per halaman, gunakan perintah ini:

document.body.style.backgroundColor = getRandomColor();

Bagaimana.? apakah Anda masih bingung akan hal ini, OK.!! akan saya jabarkan sedikit penggunaannya.

Misal Anda ingin membuat warna pada background dapat berubah-ubah saat menampilkan sebuah halaman di blog Anda, maka gunakan perintah seperti berikut, lalu letakkan diatas tag </body>

<script type='text/javascript'>
//<![CDATA[
document.body.style.background = "#"+((1<<24)*Math.random()|0).toString(16);
//]]>
</script>

Maka, setiap halaman yang terbuka dalam blog Anda akan selalu berbeda warna dari halaman yang satu dengan halaman yang lainnya, (warna akan acak pada setiap per 1 halaman).


KESIMPULAN
Pada dasarnya penggunaan warna yang selama ini Anda lakukan secara manual dengan kode heksa warna, dapat dikerjakan secara otomatis dengan perintah javascript, intinya pahami perintah-perintah kode seperti properti:"background" atau "backgroundColor" serta penggunaan untuk wilayah id ('#') atau class (.), seperti daftar isi yang telah saya modifikasi pada artikel sebelumnya tentang Desain Tampilan Daftar Isi Model Tab, sehingga kode script diatas dapat Anda kembangkan lagi untuk memberi warna acak pada latar widget footer, header dan sidebar