14.5.14
12
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:

table color heksa image

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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Belajar Perintah Javascript Pengacak Heksa Warna
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

12 komentar

  1. apa gak pusing mbak ngurusin kode yang seperti ini ,, hehe

    BalasHapus
    Balasan
    1. kodenya sudah dapat bekerja sendiri mas, jadi tidak perlu diurusin,hehe..

      justru hal yang seperti ini sebuah tantangan buat saya mas,sehingga melatih diri kita secara tidak langsung dalam berkreatifitas

      Hapus
  2. kode ini kesukaan saya mbak apalagi kalau belajar nya seru sekali pokoknya ramme hehe :)

    #Friska

    BalasHapus
  3. Waduhhh... pusiing... tapi akan kucoba. hehe :p
    makasih infonya :)

    BalasHapus
    Balasan
    1. mungkin belum terbiasa mbak jadinya bingung dech..
      saya hanya menjelaskan sedikit tentang penggunaan script untuk membuat background gambar yang dapat berubah-ubah saat menampilkan salah satu halaman dalam blog,

      Hapus
  4. saya kok malah bingung nih, saya nyimak deh :D

    BalasHapus
    Balasan
    1. hanya sedikit menerangkan tentang penggunaan properti yang harus digunakan dalam membuat script jika difungsikan untuk membuat warna background pada blog, jadi cukup letakkan script diatas pada tag </body>
      maka warna background akan dapat berubah-ubah dalam setiap halaman yang terbuka

      Hapus
  5. pertama aku otak atik kode2 seperti itu rasanya pusing dan gak mudeng2 tapi setelah belajar dan memahaminya ternyata aku masih pusing juga... @-) haaaah harus lebih giat belajar lagi nih..
    trimakasih mbak, artikelnya sangat membantu walau masih agak @-)

    BalasHapus
    Balasan
    1. hehe..karena belum terbiasa kali mas,

      sebenarnya tutorial diatas hanya menjelaskan penggunaan javascript untuk merubah warna pada background blog dengan warna yang berbeda disetiap halaman yang terbuka,
      sebagai contoh - copy code script diatas, maka warna background disetiap halaman blog anda akan berbeda-beda warna di setiap halaman,
      scriptnya seperti diatas : -

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

      Hapus
    2. iya mbak sebenarnya hanya kurang terbiasa aja

      dan 1 yang membuatku lama dalam belajar javascript dll yaitu MALAS, penyakit 1 ini ni yang jadi tersangkanya. setiap aku terjun ke lautan html @-) @-) @-) ya jadinya seperlunya aja 8-)

      Hapus
    3. tidak dipaksakan juga kok mas,hehe...karena kita kan memiliki bidangnya masing-masing, mungkin mas-nya agak malas kalu tentang perkodean, tetapi saya sebaliknya sangat menyukai tantangan dengan belajar kode-kode seperti ini,

      oy, terimakasih sudah berkunjung..salam kenal

      Hapus
  6. Waw Mantap gan
    gw pngn coba nih ane bookmark dlu ya
    comment back di http://bugis-31.blogspot.com//

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK